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.linea,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); 

希望这可以帮助!