将图例添加到D3中的hierchical条形图中

Question

我在D3中有一个具有两个“级别”数据的分层条形图，我想显示具有两个不同项目的图例。

当用户单击条形图值X进入下一级时，我希望X（即字符串）的值出现在新图表的图例中。这样，用户总是知道他们刚刚点击了什么价值/类别。

图例的第二部分是我希望图表上所有值的聚合计数显示在某处。所以如果我有一个值为10,15,25的图表，我希望能够在图表的图例中显示50。

Answer 1

我会asumme你与这个工作：http://bl.ocks.org/mbostock/1283663

第一添加文字：

var parent = svg.append("text").attr("x",-margin.left).attr("y",0) 

在下来功能更新文本：

parent.text("Position:"+d.name+" Value:"+d.value) 

和了功能：

parent.text("Position:"+d.parent.name+" Value:"+d.parent.value) 

这里working code

如果你不想显示根：

下功能：

if (d.name == "flare") { 
    parent.text("") 
    } else { 
    parent.text("Position:"+d.name+" Value:"+d.value) 
    } 

了功能：

if (d.parent.name == "flare") { 
    parent.text("") 
    } else { 
    parent.text("Position:"+d.name+" Value:"+d.parent.value) 
    } 

要在每个名称栏后显示值，请调整功能栏（d）：

bar.append("text") 
     .attr("x", -6) 
     .attr("y", barHeight/2) 
     .attr("dy", ".35em") 
     .style("text-anchor", "end") 
     .text(function(d) { return d.name+" : "+d.value; }); // <-- Here made mods