selection.datum（[值]）

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是一个固定的＆amp;重构的代码版本。

    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（）函数调用之后，您似乎错过了.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"; }));

在追加＆＃34; rect＆＃34;之前您必须使用enter（）函数，请参阅链接以获取准确的解释Click Here

d3.js将图例添加到多行系列图表中

2 个答案:

selection.datum（[值]）