javascript d3.js 向多线系列图表添加图例
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14775962/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
d3.js adding legend to multiline series chart
提问by CQM
How would one add a legend to the multiline series chart? I tried but am not getting any legend to display.
如何向多线系列图表添加图例？我试过了，但没有显示任何图例。
The block here:
这里的块：
has a flaw when the various series converge to the same point, like zero. All the labels will be overlayed on each other. Instead of going for these labels, a traditional legend would be useful.
当各种级数收敛到同一点时有一个缺陷，比如零。所有标签将相互叠加。与其使用这些标签，不如使用传统的图例。
I tried adding this
我试着添加这个
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;
});
to the end of the code, the key names (d.name) match how my data is formatted, but it does not display. At one point it showed all black boxes to the right of the graph so that means I am close but I am missing something important
在代码的末尾，键名 (d.name) 与我的数据的格式相匹配，但它不显示。有一次它显示了图表右侧的所有黑框，这意味着我很接近但我错过了一些重要的东西
any insight appreciated
任何见解表示赞赏
回答by Cihan Keser
Hereis a fixed & refactored version of your code.
这是您的代码的固定和重构版本。
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; });
You need to use enter(), but enter()and exit()methods cannotbe used with datum(). Quoting from the d3 wiki
您需要使用enter()，但是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).
selection.datum([值])
获取或设置每个选定元素的绑定数据。与 selection.data 方法不同，此方法不计算连接（因此不计算进入和退出选择）。
回答by Alex_B
You seem to be missing the .enter() after .datum() function call.
在 .datum() 函数调用之后，您似乎缺少 .enter() 。
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"; }));
Before appending the "rect" you must use the enter() function see link for exact explanation Click Here
在附加“rect”之前，您必须使用 enter() 函数，请参阅链接以获取确切说明单击此处
