將圖例添加到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