Question

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

我在这里有一个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)
      });
}

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

修正了MBS [Color01]
浮动MBS [Color02]
CMO [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 = [＆＃34;固定MBS＆＃34;，＆＃34;浮动MBS＆＃34;，＆＃34; CMO＆＃34;];

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在图例上设置标签

1 个答案: