Question

我是d3.js的初学者，所以请善待：）

我有以下数据集：

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

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

1 个答案: