Javascript D3.js中的多色时间序列

我的数据如下所示：

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

显然，我没有正确引用组值，但我不确定如何继续。在过去，我曾使用力定向网络与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"));

---

看起来数据的形状很奇怪，因为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)
}

---

看起来数据的形状很奇怪，因为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)
}

---

你能发布更多关于你是如何从

data=[

在您的

系列的示例中

？@explunit抱歉，我制作了一个数据模型，因为原始数据太复杂，忽略了相应的名称。它已被更改以反映代码中的名称。它是如何传递到行生成函数的？演示此问题的最小完整示例将d会很有帮助。添加了完整的代码，考虑到我正在学习，我从一开始就尽可能地减少了代码。你能发布更多关于如何从

data=[

在您的

系列的示例中

？@explunit抱歉，我制作了一个数据模型，因为原始数据太复杂，忽略了相应的名称。它已被更改以反映代码中的名称。它是如何传递到行生成函数的？演示此问题的最小完整示例将d很有帮助。添加了完整的代码，考虑到我正在学习，我从一开始就尽可能地将其最小化。宾果，成功了。不过你完全正确，我将按照你的建议研究使用d3.nest。在过去使用网络时，我的数据已经结构化为链接和节点。宾果，成功了。你完全正确gh，我将按照您的建议研究使用d3.nest。在过去使用网络时，我的数据已经结构化为链接和节点。