如何使图例类似于D3 v6中的堆叠条形图(并更改图例的标签)？

Question

我现在正在用D3创建一个堆叠的条形图，并试图添加一个图例来解释数据。但是，我的图例的颜色与堆叠条形图中的颜色不同。

​

这是我的图表的代码：(我在这里只放了与图例颜色相关的部分，因为整个文件太长了)：

let dataset = [{Year:'2006-2007',Energy_Recovery: 44, Disposal : 190, Recycling: 2},
               {Year:'2008-2009',Energy_Recovery: 40, Disposal : 189, Recycling: 1},
               {Year:'2009-2010',Energy_Recovery: 38, Disposal : 180, Recycling: 2},
               {Year:'2010-2011',Energy_Recovery: 41, Disposal : 167, Recycling: 2},
               {Year:'2013-2014',Energy_Recovery: 44, Disposal : 150, Recycling: 7},    
               {Year:'2014-2015',Energy_Recovery: 43, Disposal : 127, Recycling: 21},
               {Year:'2015-2016',Energy_Recovery: 49, Disposal : 117, Recycling: 20},
               {Year:'2016-2017',Energy_Recovery: 47, Disposal : 120, Recycling: 24},
               {Year:'2017-2018',Energy_Recovery: 46, Disposal : 111, Recycling: 24},
               {Year:'2018-2019',Energy_Recovery: 41, Disposal : 109, Recycling: 24}];

let first_stack = ["Energy_Recovery", "Disposal", "Recycling"];
let stack = d3.stack().keys(first_stack).order(d3.stackOrderDescending); 
let series = stack(dataset);

 //Create SVG element
let svg = d3.select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", height);

let colors = d3.scaleOrdinal(d3.schemeCategory10);

var size = 10;
svg.selectAll("mydots")
  .data(first_stack)
  .enter()
  .append("rect")
    .attr("x", 750)
    .attr("y", function(d,i){ return 20 + i*(size+5);}) 
    .attr("width", size)
    .attr("height", size)
    .style("fill", function(d){ return colors(d);});

// Add one dot in the legend for each name.
svg.selectAll("mylabels")
  .data(first_stack)
  .enter()
  .append("text")
    .attr("x", 750 + size*1.2)
    .attr("y", function(d,i){ return 25 + i*(size+5) + (size/2);}) 
    .style("fill", function(d){ return colors(d);})
    .text(function(d){ return d;})
    .attr("text-anchor", "left")
    .style("alignment-baseline", "middle");

有人知道如何处理这个问题吗？还有，谁能帮我把图例中的标签从'Energy_Recovery‘改为'Energy Recovery'？

谢谢！

Answer 1

我不明白你为什么需要这个：

let colors = d3.scaleOrdinal(d3.schemeCategory10);

您可以将colors定义为数组：

const colors = ['orange', 'blue', 'green'];

..。然后按索引将这些颜色分配给图例的点和标签：

svg.selectAll("mydots")
  .data(first_stack)
  .enter()
  .append("rect")
  ...
  .style("fill", (d, i) => colors[i]);

// Add one dot in the legend for each name.
svg.selectAll("mylabels")
  .data(first_stack)
  .enter()
  .append("text")
  ...
  .text(d => d)
  .style("fill", (d, i) => colors[i]);