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

Question

I am plotting an arbitrary number of lines with the following code, where allLines is an array of arrays of objects such that each array of objects produces a line. Right now all the lines are the same color. How can I make each one a unique color? I am looking for an alternative that would not involve shoehorning this into useing 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)

Answer 1

You can use one of the predefined scales , eg d3.scale.category20() . You use it like any other D3 scale:

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

For your lines, you have an array as the data, so that won't work directly. However, you can compute something based on the values for the lines and use that, eg

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