將標籤添加到d3 sunburst

我試圖修改D3 sunburst示例（http://bl.ocks.org/mbostock/4063423）以向弧添加標籤。將標籤添加到d3 sunburst

我已經添加了代碼來計算角度並生成文本（取自此示例：http://jsfiddle.net/4PS53/6/），但它不起作用。文本沒有出現，當我嘗試使用檢查器檢查<文本>元素時，它們看起來不在DOM中。

任何幫助非常感謝！下面的JS代碼（從原始D3畫廊示例中修改），JSON數據是相同的。我展示了我修改的部分代碼;其餘的都是一樣的。

d3.json("data.json", function(error, root) { 
    console.log(root); 
    var path = svg.datum(root).selectAll("path") 
     .data(partition.nodes) 
     .enter().append("path") 
     .attr("display", function(d) { return d.depth ? null : "none"; }) // hide inner ring 
     .attr("d", arc) 
     .style("stroke", "#fff") 
     .style("fill", function(d) { return color((d.children ? d : d.parent).name); }) 
     .style("fill-rule", "evenodd") 
     .each(stash); 

    path.append("text") 
     .text(function(d) { return d.name}) 
     .classed("label", true) 
     .attr("x", function(d) { return d.x; }) 
     .attr("text-anchor", "middle") 
     // translate to the desired point and set the rotation 
     .attr("transform", function(d) { 
      if (d.depth > 0) { 
       return "translate(" + arc.centroid(d) + ")" + 
         "rotate(" + getAngle(d) + ")"; 
      } else { 
       return null; 
      } 
     }) 
     .attr("dx", "6") // margin 
     .attr("dy", ".35em") // vertical-align 
     .attr("pointer-events", "none"); 

}); 

function getAngle(d) { 
    // Offset the angle by 90 deg since the '0' degree axis for arc is Y axis, while 
    // for text it is the X axis. 
    var thetaDeg = (180/Math.PI * (arc.startAngle()(d) + arc.endAngle()(d))/2 - 90); 
    // If we are rotating the text by more than 90 deg, then "flip" it. 
    // This is why "text-anchor", "middle" is important, otherwise, this "flip" would 
    // a little harder. 
    return (thetaDeg > 90) ? thetaDeg - 180 : thetaDeg; 
}

來源

2015-04-26 Elisabeth

有一個例子這[這裏]（http://bl.ocks.org/metmajer/5480307）和相關問題[here] （http://stackoverflow.com/questions/13958929/how-to-properly-rotate-text-labels-in-a-d3-sunburst-diagram）和[這裏]（http://stackoverflow.com/questions/ 22622381 /如何對位置文本標籤上-A-旭日-圖表-與-D3-JS）。 –

謝謝拉斯！ – Elisabeth

你需要g組元素添加文本，所以你可以改變：

var path = svg.datum(root).selectAll("path") 
    .data(partition.nodes) 
    .enter().append("path") 
    .attr("display", function(d) { return d.depth ? null : "none"; }) // hide inner ring 
    .attr("d", arc) 
    .style("stroke", "#fff") 
    .style("fill", function(d) { return color((d.children ? d : d.parent).name); }) 
    .style("fill-rule", "evenodd") 
    .each(stash);

到

var path = svg.datum(root).selectAll("path") 
    .data(partition.nodes) 
    .enter().append("g") 

path.append("path") 
    .attr("display", function(d) { return d.depth ? null : "none"; }) // hide inner ring 
    .attr("d", arc) 
    .style("stroke", "#fff") 
    .style("fill", function(d) { return color((d.children ? d : d.parent).name); }) 
    .style("fill-rule", "evenodd") 
    .each(stash);

入住此的jsfiddle： http://jsfiddle.net/5d0zd2s7/

來源

2015-04-27 00:37:15 Marek

啊失蹤「g」！非常感謝Marek。只是做到了這一點，它運作得很好。 – Elisabeth

將標籤添加到d3 sunburst

回答

相關問題