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

D3.js中的多色时间序列

1 个答案: