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

Posted 2023-02-22

【中文标题】d3.js 将图例添加到多线系列图表

【英文标题】：d3.js adding legend to multiline series chart

【发布时间】：2013-01-24 10:03:34

【问题描述】：

如何在多线系列图表中添加图例？我试过了，但没有显示任何图例。

这里的块：

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) 与我的数据格式匹配，但不显示。在某一时刻，它显示了图表右侧的所有黑框，这意味着我很接近，但我错过了一些重要的东西

感谢任何见解

【参考方案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 方法不同，此方法不计算连接（因此不计算进入和退出选择）。

【讨论】：

我加了一个点，你的代码对我有用。 var legend = svg.selectAll('.g')

【参考方案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"; ));

在添加“rect”之前，您必须使用 enter() 函数，具体解释请参见链接Click Here

【讨论】：

hm，我发现该逻辑存在一些差异，在示例图中，city 变量在某些地方以.append("text") 开头，然后是.datum(...)，之后没有enter()，但只是属性修改。另外，当我添加enter() 时，我的控制台说对象没有enter() 并给出了错误

我可能是错的，但我认为混淆来自于事实（如果我没看错的话） .datum() 将值添加/更改到您选择的现有元素。在您声明“legend.selectAll('rect')”的代码中不存在，要创建初始连接，您需要使用“.data(data).enter()”来创建新的“rect”元素。跨度>

关于 .data 和 .datum ***.com/questions/13181194/…

的问题有一个很好的答案