D3.js 中的多色时间序列

Question

我的数据如下所示：

series = [{group: 0 ,time: 1, value: 20}, {group:0, time: 2, value: 18},
{group: 1 ,time: 1, value: 10}, {group:1, time: 2, value: 15},
{group: 2 ,time: 1, value: 5}, {group:1, time: 2, value: 10}];

我正在使用这样的秤：

var color = d3.scale.category10();

当我绑定到数据时，我引用了笔画样式：

svg.selectAll(".line")
    .data(series)
    .enter().append("path")
    .attr("class", "line")
    .attr("d", line)
    .style("stroke", function(d) {return color(d.group)});   <-----------

渲染后，似乎默认为相同的颜色。检查元素会产生笔触颜色：

style="stroke: #1f77b4;"

显然，我没有正确引用组值，但我不确定如何继续。过去，我曾使用力导向网络与 D3 合作，并且根据比例着色没有问题。

以下是完整示例：

// data
var series = [
    [{group: 0 ,time: 1, value: 20}, {group:0, time: 2, value: 18}, {group:0, time: 3, value: 15}, {group:0, time: 4, value: 10}, {group:0, time: 5, value: 7}, {group:0, time: 6, value: 4}, {group:0, time: 7, value: 0}, {group:0, time: 8, value: 0}],
    [{group: 1, time: 1, value: 0}, {group:1, time: 2, value: 2}, {group:1, time: 3, value: 5}, {group:1, time: 4, value: 10}, {group:1, time: 5, value: 13}, {group:1, time: 6, value: 16}, {group:1, time: 7, value: 20}, {group:1, time: 8, value: 15}],
    [{group: 2, time: 1, value: 0}, {group:2, time: 2, value: 0}, {group:2, time: 3, value: 0}, {group:2, time: 4, value: 0}, {group:2, time: 5, value: 0}, {group:2, time: 6, value: 0}, {group:2, time: 7, value: 0}, {group:2, time: 8, value: 5}],
    [{group: 3, time: 1, value: 0}, {group:3, time: 2, value: 5}, {group:3, time: 3, value: 5}, {group:3, time: 4, value: 5}, {group:3, time: 5, value: 5}, {group:3, time: 6, value:      6}, {group:3, time: 7, value: 6}, {group:3, time: 8, value: 6}]
];

var n = series[0].length;

var color = d3.scale.category10();

// canvas margins
var margin = {top: 10, right: 10, bottom: 20, left: 40},
    width = 400 - margin.left - margin.right,
    height = 200 - margin.top - margin.bottom;

// x scale
var x = d3.scale.linear()
    .domain([1, n])
    .range([0, width]);

// y scale
var y = d3.scale.linear()
    .domain([-1, 20])
    .range([height, 0]);

// the lines
var line = d3.svg.line()
    .interpolate("basis")
    .x(function(d) { return x(d.time); })
    .y(function(d) { return y(d.value); });

// the svg canvas
var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// append lines to canvas
svg.selectAll(".line")
    .data(series)
    .enter().append("path")
    .attr("class", "line")
    .attr("d", line)
    .style("stroke", function(d) {return color(d.group)});


//x-axis
svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.svg.axis().scale(x).orient("bottom"));

//y-axis
svg.append("g")
    .attr("class", "y axis")
    .call(d3.svg.axis().scale(y).orient("left"));

Answer 1

您的数据看起来很奇怪，因为 group 属性实际上是子数组的一部分，并且对每个元素都重复。一个快速的技巧是从数组的第一个元素中读取它：

.style("stroke", function(d) { return colorLines(d[0].group) });

但您可能需要考虑重组数据或使用 d3.nest 为您重新格式化。

作为一种通用的调试方法，尽管大多数 d3 示例都使用内联函数，但没有什么可以阻止您将它们设为多行并在每个示例中添加 console.log 语句以找出数据的形状及其原因不是你所期望的。例如：

.style("stroke", function(d) {
  console.log('data passed to color function', d);
  console.log('d.group', d.group);
  return color(d.group)
}