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