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>