Question

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

如何传递颜色范围而不是手动调用hexa代码？

我尝试将颜色值传递为

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 = colors('apple')时，会为苹果分配一种颜色。下次进入苹果时，您将检索相同的颜色。

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

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);

自动化堆积条形图的颜色选择

1 个答案: