whytheq whytheq - 1 year ago 66
Javascript Question

How to add text to paths

I suspect I'm barking up the wrong tree - although I've got no errors in the console to help me out.

I've got this block of code:

var path = svg.data([json]).selectAll("path")
.attr("display", function(d) {
return d.depth ? null : "none";
.attr("d", arc)
.style("stroke", "#fff")
.style("fill", function(d) {
return color((d.children ? d : d.parent).name);
.attr("fill-rule", "evenodd")
.style("opacity", 1)

//>>this section functions ok
.text(function(d) {
return d.name + ": " + d.amount;

//>>this section throws no errors but "foo" does not appear
.text(function(d) {
return "foo";
.style("stroke", "#3b5998")
.style("fill", "#3b5998");

The code snippet beginning
works ok but the final snippet beginning
adds the text foo to the html but it is not visible on the webpage - why is it not visible and how do I add labels?

This is part of this visual:


Answer Source

text cannot be nested with a path. You'll need to add it to the svg instead. Additionally, you'll want to position the text in some way:

    .text(function(d) {
        return "foo";
    .attr("x", function(){ return 0 })
    .attr("y", function(){ return 0 })
    .style("stroke", "#3b5998")
    .style("fill", "#3b5998");
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download