d3 輸入未放置數據

Question

使用 d3，我正在將 8760 個數據點（2013 年每小時一個）從 csv 讀取到二維數組中，然后嘗試將它們創建為<svg>元素中的圓圈。 代碼成功導入了數據，因為我可以在瀏覽器的控制台中查看它。 但是， enter 函數似乎沒有應用數據來創建圓圈。 沒有錯誤被提出。

代碼：

  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script>
  var w = 900, h = 500;
  var dataset = [];

  d3.csv("Jsorted2.csv", function(error, data) {
    dataset = data.map(function(d) { return [ +d["Load"], new Date(d["dtDateTime"]), +d["Month"], +d["Hour"], +d["DayofYear"], +d["NetLoad"]]; });
  });

  var svg = d3.select("body")
    .append("svg")
    .attr("width", w)
    .attr("height", h);

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

</script>

數據正確加載：

瀏覽器檢查器控制台屏幕截圖

但圓圈不見了：

瀏覽器檢查器源屏幕截圖

如果更改數據集的初始定義，我會發現不同的錯誤。 如果我使用

var dataset = [[]];

數據仍然加載，但現在當 d3 嘗試抓取數據時我收到一個錯誤：

d3.v4.min.js:3 Error: <circle> attribute cy: Expected length, "NaN".
(anonymous function) 
@ d3.v4.min.js:3Q_ 
@ d3.v4.min.js:6K_ 
@ d3.v4.min.js:6(anonymous function) 
@ D3test4LD.html:29

d3 在創建圓圈方面更進一步：

<svg width="900" height="500">
<circle cx="0" cy="NaN"></circle>
</svg>

為什么 d3 不將數據加載到圓圈中？ 似乎 d3 沒有像它應該的那樣將數據傳遞給 d，因為 d[0] 沒有長度。 如果我不能讓它工作，我只會寫一個 Javascript for 循環來自己放置它們，但我想弄清楚為什么這不起作用。 它看起來像一個類型轉換問題，但我用 + 導入數據，它應該將數據設置為數字。 我什至可以在控制台中測試：

> typeof(dataset[0][0])
"number" 

請不要包含 js for 循環作為解決方案。

---

更新

所以，在研究異步數據加載后，我確實解決了我的問題，如下面的答案。 為了清晰和方便的未來參考，這里是一種編寫解決方案的方法：

setInterval(drawLD, 2000);

function drawLD(){
    svg.selectAll("circle")
      .data( dataset )
      .enter()
      .append("circle")
      .attr("cx", function(d,i) { return Math.round(i/8760); })
      .attr("cy", function(d,i) { return Math.round(d[0]/maxload); })
      .attr("r", function(d,i) { return 2; });
  }

Answer 1

d3.csv是一個異步函數。 創建圓圈的代碼在您的 csv 數據返回之前執行。 將您的 d3 代碼放在回調中。

<script>
  var w = 900, h = 500;
  var dataset = [];

  d3.csv("Jsorted2.csv", function(error, data) {
    dataset = data.map(function(d) { return [ +d["Load"], new Date(d["dtDateTime"]), +d["Month"], +d["Hour"], +d["DayofYear"], +d["NetLoad"]]; });

    var svg = d3.select("body")
    .append("svg")
    .attr("width", w)
    .attr("height", h);

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

  });
</script>