javascript - 自动为堆叠条形图选择颜色

Question

下面是我的示例 jsfiddle，它是我想要实现的目标。

http://jsfiddle.net/mwvhhe3o/

1. 如何传递颜色范围而不是手动输入十六进制代码？

我尝试将颜色值传递为

var colorRange = d3.scale.category20();
 var colors = d3.scale.ordinal()
            .range(colorRange.range());

然后，.attr("fill", colorRange ); 进行相应的填充。然而，并没有成功。

我将图例值作为变量传递，有没有办法自动切换大小写？大小写切换的任何替代方法。

我有太多图例名称，无法手动命名。下面是一个例子

 legend.append("text")
       .attr("x", width + 5)
       .attr("y", 9)
       .attr("dy", ".35em")
       .style("text-anchor", "start")
       .text(function(d, i) { 
        switch (i) {
        case 0: return "Anjou pears";
        case 1: return "Naval oranges";
        case 2: return "McIntosh apples";
        case 3: return "Red Delicious apples";
        case 4: return "cherries";
        case 5: return "plum";
        case 6: return "grapes";
        case 7: return "melons";
       }
    }); 

任何实现上述任务的方向或建议都是有帮助的

Answer 1

http://jsfiddle.net/ve38098w/

您所需要做的就是创建一个新的色标

var colors = d3.scale.category20()

将每个图层点与水果关联

var keys = ["redDelicious", "mcintosh", "oranges", "pears", "cherries", "plum","grapes", "melons"]

var dataset = d3.layout.stack()(keys.map(function(fruit) {
  return data.map(function(d) {
    return {x: parse(d.year), y: +d[fruit], name: fruit};
  });
}));

然后在数据连接期间开始传递水果名称。

var rect = groups.selectAll("rect")
  .data(function(d) { return d; })
  .enter()
  .append("rect")
  ...
  .style("fill", d=> colors(d.name))

第一次传入"apple"(如var randomColor = color('apple'))时，apple 将被分配一种颜色。下次传入 apple 时，您将检索到相同的颜色。

对于图例，使用前面讨论的色标进行数据连接来创建矩形。

var legend = svg.selectAll(".legend")
  .data(keys)
  .enter().append("g")
  .attr("class", "legend")
  .attr("transform", function(d, i) { return "translate(30," + i * 19 + ")"; });

legend.append("rect")
  .attr("x", width - 18)
  .attr("width", 18)
  .attr("height", 18)
  .style("fill", d=>colors(d));

legend.append("text")
  .attr("x", width + 5)
  .attr("y", 9)
  .attr("dy", ".35em")
  .style("text-anchor", "start")
  .text(d=>d);