d3.js將圖例添加到多行系列圖表

Question

如何將圖例添加到多行系列圖表中？我試過，但沒有得到任何圖例顯示。

的這裏塊：

http://bl.ocks.org/3884955

有一個缺陷，當各種系列匯聚到同一點，像零。所有的標籤都會疊加在一起。傳統的傳說將非常有用，而不是去尋找這些標籤。

我嘗試添加該

var legend = svg.append("g") 
.attr("class", "legend") 
.attr("height", 100) 
.attr("width", 100) 
.attr('transform', 'translate(-20,50)');  

legend.selectAll('rect') 
    .datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; }) 
    .append("rect") 
    .attr("x", width) 
    .attr("y", function(d, i){ return i * 20;}) 
    .attr("width", 10) 
    .attr("height", 10) 
    .style("fill", function(d) { 
    return color.domain(d3.keys(d[0]).filter(function(key) { return key !== "day"; })); 
    }); 

legend.selectAll('text') 
    .datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; }) 
    .append("text") 
    .attr("x", width) 
    .attr("y", function(d, i){ return i * 20 + 9;}) 
    .text(function(d) { 
    return d.name; 
    }); 

到代碼的末尾，我的數據是如何格式化的鍵值名（d.name）匹配，但它並不顯示。在一個點上它顯示全黑盒子到圖形的右側，這樣意味着我接近，但我缺少一些重要的東西

任何見解讚賞

Answer 1

Here是你的代碼的固定&重構版本。

var legend = svg.selectAll('g') 
     .data(cities) 
     .enter() 
     .append('g') 
     .attr('class', 'legend'); 

    legend.append('rect') 
     .attr('x', width - 20) 
     .attr('y', function(d, i){ return i * 20;}) 
     .attr('width', 10) 
     .attr('height', 10) 
     .style('fill', function(d) { 
      return color(d.name); 
     }); 

    legend.append('text') 
     .attr('x', width - 8) 
     .attr('y', function(d, i){ return (i * 20) + 9;}) 
     .text(function(d){ return d.name; }); 

您需要使用enter()，但enter()和exit()方法不能與datum()使用。從d3 wiki

selection.datum引用（[值]）

獲取或設置綁定的數據爲每個選定的元素。與selection.data方法不同，此方法不計算連接（因此不計算進入和退出選擇）。

Answer 2

你似乎缺少.datum後。進入（） （）函數調用。

legend.selectAll('rect') 

    .datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; }) 

    .enter() // <====== 

    .append("rect") 

    .attr("x", width) 

    .attr("y", function(d, i){ return i * 20;}) 

    .attr("width", 10) 

    .attr("height", 10) 

    .style("fill", function(d) { 

    return color.domain(d3.keys(d[0]).filter(function(key) { return key !== "day"; })); 

追加「矩形」之前，你必須使用輸入（）函數見鏈接，確切的解釋Click Here