d3.js:具有多个 y 轴值的数据集数组

Question

我是 d3.js 的初学者，所以请善待:)

considering this jsbin example

我有以下数据集:

      var dataset = [
                      [d3.time.hour.utc.offset(now, -5), 1, 10], 
                      [d3.time.hour.utc.offset(now, -4), 2, 20], 
                      [d3.time.hour.utc.offset(now, -3), 3, 30], 
                      [d3.time.hour.utc.offset(now, -2), 4, 40], 
                      [d3.time.hour.utc.offset(now, -1), 5, 50], 
                      [now, 6, 60],
                    ];

两个问题。

d3 是否提供了一种更好的方法来查找我的数据集数组中 y 轴数据(除第 0 列以外的所有列，第 0 列是 x 轴(时间))的最大值？目前我只是遍历整个数据集数组并制作第二个数组，不包括第一列。也许除了我应该完全使用的数组之外，还有更好的数据结构吗？

    var data_arr = [];

    for (row in dataset){
        for (col=1;col < dataset[row].length; col++){
            data_arr.push(dataset[row][col]);
        }
    }

    var yScale = d3.scale.linear()
                         .domain([0, d3.max(data_arr)])
                         .range([h - padding, padding]);

一旦解决了这个问题，我仍然需要确定如何绘制多个 y 轴值!在我需要多个 y 轴值之前，这很好用:

    svg.selectAll("circle")
       .data(dataset)
       .enter()
       .append("circle")
       .attr("cx", function(d) {
            return xScale(d[0]);
       })
       .attr("cy", function(d) {
            return yScale(d[1]);
       })
       .attr("r", 2);

请在此处查看带有代码的图表以获取完整上下文: http://jsbin.com/edatol/1/edit
任何帮助表示赞赏!

Answer 1

我对您的示例进行了一些更改，您可以在 http://jsbin.com/edatol/2/edit 看到结果。 .

首先，我稍微修改了您的数据。这主要只是一种风格，但我发现使用对象而不是数组更容易:

        //Static dataset
        var dataset = [
          {x: d3.time.hour.utc.offset(now, -5), y1: 1, y2: 10}, 
          {x: d3.time.hour.utc.offset(now, -4), y1: 2, y2: 20},
          {x: d3.time.hour.utc.offset(now, -3), y1: 3, y2: 30},
          {x: d3.time.hour.utc.offset(now, -2), y1: 4, y2: 40},
          {x: d3.time.hour.utc.offset(now, -1), y1: 5, y2: 50},
          {x: now, y1: 6, y2: 60},
        ];

然后你可以像这样找到你的域和范围:

var xDomain = d3.extent(dataset, function(i) { return i.x; });
var maxY = d3.max(dataset, function(i) { return Math.max(i.y1, i.y2); });  

然后要添加多个 y 值，您只需附加一个具有适当值的附加圆圈。我为它们提供了不同的类，以便您在以后想要进行转换或更新时可以使用它们来选择它们。

        //Create circles
        svg.selectAll(".y1")
           .data(dataset)
           .enter()
           .append("circle")
           .attr("cx", function(d) { return xScale(d.x); })
           .attr("cy", function(d) { return yScale(d.y1); })
           .attr("class", "y1")
           .attr("r", 2);

        //Create circles
        svg.selectAll(".y2")
           .data(dataset)
           .enter()
           .append("circle")
           .attr("cx", function(d) { return xScale(d.x); })
           .attr("cy", function(d) { return yScale(d.y2); })
           .attr("class", "y2")
           .attr("r", 2);