d3.js 多y轴折线图

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

希望这可以帮助!