D3 在图例上设置标签

Question

我需要帮助在 D3 堆积条形图上设置标签。我不确定如何通过引用数据对象中的名称属性来映射图例中的颜色。

我这里有一个 JSFiddle： http://jsfiddle.net/Lhs3e7xk/1/

我特别需要帮助的代码是图例函数：

function updateLegend(dt) {
  var legend = svg.selectAll(".legend")
    .data(color.domain()) // I tried dt as well.
    .enter().append("g")
    .attr("class", "legend")
    .attr("transform", function(d, i) {
      return "translate(0," + i * 20 + ")";
    });

    legend.append("rect")
      .attr("x", width - 18)
      .attr("width", 18)
      .attr("height", 18)
      .style("fill", color);

    legend.append("text")
      .attr("x", width - 24)
      .attr("y", 9)
      .attr("dy", ".35em")
      .style("text-anchor", "end")
      .text(function(d, i) {
        console.log(d)
        return color(d.name)
      });
}

输出应该是数据集中名称属性的值以及与该组关联的颜色。

固定 MBS [Color01]
浮动 MBS [Color02]
首席营销官 [Color03]

谢谢！

Answer 1

而不是这个

  .text(function(d, i) {
    console.log(d)
    return color(d.name)
  })

像这样执行文本功能：

  .text(function(d, i) {
    if(i==0)
     return "Fixed MBS"
     if(i==1)
     return "Floating MBS"
     if(i==2)
     return "CMO"

  });

工作示例here

编辑

使用数据设置图例 //你的动态图例数据集 var legends = ["Fixed MBS", "Floating MBS", "CMO"];

function updateLegend(dt) {
  var legend = svg.selectAll(".legend")
    .data(legends)//pass the lgend data
    .enter().append("g")
    .attr("class", "legend")
    .attr("transform", function(d, i) {
      return "translate(0," + i * 20 + ")";
    });

    legend.append("rect")
      .attr("x", width - 18)
      .attr("width", 18)
      .attr("height", 18)
      .style("fill", function(d, i){return color(i)});//color based on index

    legend.append("text")
      .attr("x", width - 24)
      .attr("y", 9)
      .attr("dy", ".35em")
      .style("text-anchor", "end")
      .text(function(d, i) {
        return d;//return the array data
      });
}

工作代码here

D3 在图例上设置标签

D3 Set labels on Legend

javascript

legend

d3.js