Question

我想将CSV导入的数据写入网页。我可以使用以下读取CSV的传统方法来做到这一点：

  d3.csv("day.csv",function(data) {
  d3.select("ul").append("li")
  .text(data.Endangered).style("color","brown");
 });

但是，当我尝试对d3 v5使用最新方式时，它对我不起作用。

 d3.csv("day.csv").then(function(data) {
     d3.select("ul").append("li")
    .text(data.Endangered).style("color","brown");
  });

也许我做的事情不正确。

Answer 1

您没有迭代数据。在D3中，应将数据加入选择中，然后根据数据创建DOM节点。

也许这会有所帮助：

d3.csv("day.csv").then(function(data) {
  d3.select("ul") // where dom nodes will be appended
  .selectAll("li") // elements that should be bound with array items
  .data(data) // add array with data
  .enter() // join data and selection nodes
  .append("li") // If data has more indexes than your li selection, the missing elements will be created
  .text(d => d.Endangered)
  .style("color","brown");
});

在D3 v5 JS中读取CSV：为什么我在获取数据时遇到问题？

1 个答案: