How to text-overflow in d3.js

up vote
1
down vote

favorite

I'm using d3.js and I have some circles and some text related to each circle. I want the overflowed text to be ellipsised.

I've tried with css

white-space: nowrap; overflow: hidden; text-overflow: ellipsis;

But it doesn't work. How should I do?

 node.append("text").attr("id", "text")

     .attr("dx", function(d) { return (d.size * (-100)) ;})

     .attr("dy", function(d) { 

          if(flag==1) {

              flag=0; return -(d.size * 57);

          } else{

              flag=1; return ((d.size * 100) + 5);

          }

     })

     .text( function(d){ return d.name;})

     .style("opacity", 1);

edited Nov 13 at 6:52

Tân Nguyễn

3,48932350

asked Nov 12 at 17:30

Marco

New contributor

check this : stackoverflow.com/questions/15975440/…
– Umesh Maharshi
Nov 12 at 20:57

add a comment |

up vote
1
down vote

favorite

I'm using d3.js and I have some circles and some text related to each circle. I want the overflowed text to be ellipsised.

I've tried with css

white-space: nowrap; overflow: hidden; text-overflow: ellipsis;

But it doesn't work. How should I do?

 node.append("text").attr("id", "text")

     .attr("dx", function(d) { return (d.size * (-100)) ;})

     .attr("dy", function(d) { 

          if(flag==1) {

              flag=0; return -(d.size * 57);

          } else{

              flag=1; return ((d.size * 100) + 5);

          }

     })

     .text( function(d){ return d.name;})

     .style("opacity", 1);

edited Nov 13 at 6:52

Tân Nguyễn

3,48932350

asked Nov 12 at 17:30

Marco

New contributor

check this : stackoverflow.com/questions/15975440/…
– Umesh Maharshi
Nov 12 at 20:57

add a comment |

up vote
1
down vote

favorite

I'm using d3.js and I have some circles and some text related to each circle. I want the overflowed text to be ellipsised.

I've tried with css

white-space: nowrap; overflow: hidden; text-overflow: ellipsis;

But it doesn't work. How should I do?

 node.append("text").attr("id", "text")

     .attr("dx", function(d) { return (d.size * (-100)) ;})

     .attr("dy", function(d) { 

          if(flag==1) {

              flag=0; return -(d.size * 57);

          } else{

              flag=1; return ((d.size * 100) + 5);

          }

     })

     .text( function(d){ return d.name;})

     .style("opacity", 1);

edited Nov 13 at 6:52

Tân Nguyễn

3,48932350

asked Nov 12 at 17:30

Marco

New contributor

I'm using d3.js and I have some circles and some text related to each circle. I want the overflowed text to be ellipsised.

I've tried with css

white-space: nowrap; overflow: hidden; text-overflow: ellipsis;

But it doesn't work. How should I do?

 node.append("text").attr("id", "text")

     .attr("dx", function(d) { return (d.size * (-100)) ;})

     .attr("dy", function(d) { 

          if(flag==1) {

              flag=0; return -(d.size * 57);

          } else{

              flag=1; return ((d.size * 100) + 5);

          }

     })

     .text( function(d){ return d.name;})

     .style("opacity", 1);

javascript css css3 d3.js

edited Nov 13 at 6:52

Tân Nguyễn

3,48932350

asked Nov 12 at 17:30

Marco

New contributor

edited Nov 13 at 6:52

Tân Nguyễn

3,48932350

asked Nov 12 at 17:30

Marco

New contributor

edited Nov 13 at 6:52

Tân Nguyễn

3,48932350

edited Nov 13 at 6:52

Tân Nguyễn

3,48932350

edited Nov 13 at 6:52

Tân Nguyễn

3,48932350

asked Nov 12 at 17:30

Marco

New contributor

asked Nov 12 at 17:30

Marco

asked Nov 12 at 17:30

Marco

New contributor

Marco is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

check this : stackoverflow.com/questions/15975440/…
– Umesh Maharshi
Nov 12 at 20:57

add a comment |

check this : stackoverflow.com/questions/15975440/…
– Umesh Maharshi
Nov 12 at 20:57

check this : stackoverflow.com/questions/15975440/…
– Umesh Maharshi
Nov 12 at 20:57

add a comment |

active

oldest

votes

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

Marco is a new contributor. Be nice, and check out our Code of Conduct.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53267248%2fhow-to-text-overflow-in-d3-js%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

active

oldest

votes

Marco is a new contributor. Be nice, and check out our Code of Conduct.

draft saved

draft discarded

Marco is a new contributor. Be nice, and check out our Code of Conduct.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

O aMm,pwlo3MA5xqhH8LkP oaymcBiAD,8g0 OBqjTP7bo

搜尋此網誌

Cfrgtkky