如何向多行系列图表添加图例？我试过,但没有任何传说显示.
这里的区块：
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",i){ return i * 20 + 9;})
.text(function(d) {
return d.name;
});
到代码结尾,键名(d.name)与我的数据格式相符,但不显示.有一点,它显示了图表右侧的所有黑框,这意味着我很近,但我错过了一些重要的事情
任何洞察力赞赏
解决方法
Here是一个固定&您的代码重构版本.
var legend = svg.selectAll('g')
.data(cities)
.enter()
.append('g')
.attr('class','legend');
legend.append('rect')
.attr('x',width - 20)
.attr('y',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',i){ return (i * 20) + 9;})
.text(function(d){ return d.name; });
您需要使用enter(),但是输入()和exit()方法不能与datum()一起使用.从d3 wiki起
selection.datum([value])
Gets or sets the bound data for each selected element. Unlike the selection.data method,this method does not compute a join (and thus does not compute enter and exit selections).