Question

我制作了一个包含多个y轴值的图表，这些值被绘制为圆圈。我现在想要用线连接每个y轴值（基本上是折线图）。

我认为我的错误在于我如何尝试定义y轴线值：

        var line = d3.svg.line()
                     .x(function(d) { return x(d.x); })
                     .y(function(d) { return y(d.y1, d.y2, d.y3); });

这是我的数据集：

var dataset = [
      {x: d3.time.hour.utc.offset(now, -5), y1: 1, y2: 3, y3: 2}, 
      {x: d3.time.hour.utc.offset(now, -4), y1: 2, y2: 2, y3: 4},
      {x: d3.time.hour.utc.offset(now, -3), y1: 3, y2: 3, y3: 1},
      {x: d3.time.hour.utc.offset(now, -2), y1: 4, y2: 1, y3: 2},
      {x: d3.time.hour.utc.offset(now, -1), y1: 5, y2: 5, y3: 3},
      {x: now, y1: 6, y2: 4, y3: 3},
    ];

以下是我的图表的完整示例：http://jsbin.com/edikeg/1/edit

我已经阅读了line（）方法api参考，但我不确定还有什么可以尝试。如果有人可以推荐最好的方法来完成这个，以及任何添加d3.js开始提示或初学者资源，我会非常感激。

由于

Answer 1

首先，您的数据集采用非最佳格式。更好的格式是为每个线/点集创建一个对象：

var dataset = [
    [
        {x: d3.time.hour.utc.offset(now, -5), y: 1}, 
        {x: d3.time.hour.utc.offset(now, -4), y: 2}, 
        {x: d3.time.hour.utc.offset(now, -3), y: 3}, 
        {x: d3.time.hour.utc.offset(now, -2), y: 4}, 
        {x: d3.time.hour.utc.offset(now, -1), y: 5}, 
        {x: now, y: 1}
    ],
    [
        // y2-values paired with x-values
    ],
    [
        // y3-values paired with x-values
    ]
];

为什么，你问？因为使用d3创建对象和对象组会更容易。如果需要，您也可以编写一个map函数将当前数据转换为此格式。

现在，您的数据格式更简单，创建直线和圆的代码将不依赖于数据集中的项数。在这里查看一个有效的重写版本：

http://jsbin.com/edikeg/3/edit

对正在发生的事情的基本解释：

对于数据集中的每个项目，我们创建g.line，pathContainer来保存每条路径及其每个圆点。

  var pathContainers = svg.selectAll('g.line')
    .data(dataset);

  pathContainers.enter().append('g')
    .attr('class', 'line');

然后，在每个pathContainer中，我们创建一个path。

  pathContainers.selectAll('path')
    .data(function (d) { return [d]; }) // continues the data from the pathContainer
    .enter().append('path')
      .attr('d', d3.svg.line()
        .x(function (d) { return xScale(d.x); })
        .y(function (d) { return yScale(d.y); })
        .interpolate('monotone')
      );

最后，我们为每个circle

数据集中的每个点创建pathContainer

  pathContainers.selectAll('circle')
    .data(function (d) { return d; })
    .enter().append('circle')
    .attr('cx', function (d) { return xScale(d.x); })
    .attr('cy', function (d) { return yScale(d.y); })
    .attr('r', 5);

希望这有帮助！

d3.js多y轴线图

1 个答案: