d3.js在从对象数组中绘制任意数量的线时的唯一颜色



我用以下代码绘制任意数量的线,其中allLines是对象数组的数组,因此每个对象数组都会生成一条线。现在所有的线条都是相同的颜色我怎样才能使每一个都是独一无二的颜色我正在寻找一种替代方案,它不会将此硬塞进使用nest()

   var lines = d3.select("svg").selectAll(".myLine")
        .data(allLines)
    lines.enter()
        .append("path")
        .attr("class", "myLine")
        .attr("d", tweetLine)
        .attr("fill", "none")
        .attr("stroke", "darkred")
        .attr("stroke-width", 2)
    lines.exit().remove();
    lines.attr("class", "myLine")
        .attr("d", tweetLine)
        .attr("fill", "none")
        .attr("stroke", "darkred")
        .attr("stroke-width", 2)

您可以使用预定义的比例之一,例如d3.scale.category20()。你可以像使用其他D3量表一样使用它:

var colours = d3.scale.category20();
colours(someData);
colours(someOtherData);

对于你的行,你有一个数组作为数据,所以这不会直接起作用。然而,您可以根据行的值来计算一些东西,并使用它,例如

.attr("stroke", function(d) {
  return colors(d3.sum(d, function(e) {
    return e.whateverTheNumberThatDeterminesTheLineIs;
  }));
})

最新更新