d3.js：數據集陣列瓦特/多y軸值

我有以下數據集：

 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軸值！

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

請看一看圖W這裏/代碼現在完整的上下文：http://jsbin.com/edatol/1/edit 任何幫助表示讚賞之前，我需要多個Y軸值，這工作得很好！

來源

2012-10-04 darko

我對您的示例進行了一些更改，您可以在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);

來源

2012-10-04 17:50:22 Bill

d3.js：數據集陣列瓦特/多y軸值

回答

相關問題