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＆amp; heroku所以现场的heroku网站是 https://neweventdetection.herokuapp.com/

如果您在本网站上打开控制台并转到＆＃34; Elements＆＃34;在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

就像弗兰克在答案的后半部分here中所解释的那样：

数据加载是异步的，所以这段代码：

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

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

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

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

所以你甚至不需要设置＆＃34;全球＆＃34; final_news_events。

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

1 个答案: