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

Question

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

考虑这个 jsbin 例子

我有以下数据集：

      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],
                    ];

两个问题。

1. 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]);
   

2. 一旦解决了，我仍然需要确定如何绘制多个 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);