d3.js 多y轴折线图答案

【问题标题】：d3.js multi y-axis line chartd3.js 多y轴折线图
【发布时间】：2012-11-02 20:18:56
【问题描述】：

我制作了一个带有多个 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 入门技巧或初学者资源可供研究，我将不胜感激。

谢谢

【问题讨论】：

标签： d3.js

【解决方案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')
      );

最后，我们为每个pathContainer 的数据集中的每个点创建一个circle

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

希望这会有所帮助！

【讨论】：