d3.js多轴线图

我制作了一个图表，其中包含多个被绘制为圆形的y轴值。我现在想用线连接每个y轴值（基本上是一个折线图）。d3.js多轴线图

我觉得我的错误在于我怎么尝试定义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开始提示或初学者资源，我将不胜感激。

感谢

来源

2012-11-02 darko

首先，你的数据集是在非最佳格式。更好的格式是为每个线/点集创建单个对象：

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创建对象和对象组会更容易。如果需要，也可以编写地图功能将当前数据转换为此格式。

现在，您的数据格式更简单，创建线条和圆圈的代码将不依赖于数据集中的项目数。退房工作，重写的版本在这里：

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

希望这有助于！

来源

2012-11-02 22:48:53

d3.js多轴线图

回答

相关问题