如何在D3.js中显示对象数组

Question

所以我有一个.csv文件final_news_events.csv，我想在网站上显示其内容。

文件new_event_list.html的第151行的以下D3.js代码无法正常运行：

<script type="text/javascript">
  d3.select("body").append("p").text("New paragraph!");
  var final_news_events = [];
  d3.csv("final_news_events.csv")
                            .row(function(d) { return {news_event: d.News_Event}; })
                            .get(function(error, rows) { 
                              console.log(rows); 
                              final_news_events = rows;
                            });
  d3.select("body").append("ol").selectAll("text")
    .data(final_news_events)
    .enter()
    .append("li")
    .text(function(d) {
      return "Object 2";
  });
</script>  

我已将代码推送到github＆heroku，因此实时的heroku网站位于https://neweventdetection.herokuapp.com/

如果您在此网站上打开控制台并转到Google chrome中的“元素”，则可以看到某些D3.js代码正在运行：

<p>New paragraph!</p>
<ol></ol>

但是我如何显示它：

<p>New paragraph!</p>
<ol>
  <li>White House moves to take Cuba off Terrorism List</li>
  <li>US plans stiffer rules protecting retiree cash</li>
  <li>Rival Factions in Ukraine Are Urged to Withdraw Heavy Weapons</li>
  <li>Boko Haram Abducted Nigerian Girls One Year Ago</li>
</ol>

Answer 1

就像弗兰克在回答的后半部分在这里解释的那样：

数据加载是异步的，因此此代码：

d3.select("body").append("ol").selectAll("text")
  .data(final_news_events)
  .enter()
  .append("li")
  .text(function(d) {
    return "Object 2";
});

在加载文件之前运行，此时final_news_events仍然为[]并且没有任何内容附加到DOM。

如果将该代码包装在render函数中：

function renderList(newsEvents) {
  d3.select("body").append("ol").selectAll("text")
    .data(newsEvents)
    .enter()
    .append("li")
    .text(function(d) {
      return "Object 2";
  });
}

那么您可以在加载数据时调用该函数-从此处开始：

.get(function(error, rows) { 
  console.log(rows); 
  renderList(rows);
});

因此，您甚至不需要设置“全局” final_news_events 。