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

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

文件第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>  

d3.选择（“正文”）。附加（“p”）。文本（“新段落！”）；
var最终新闻事件=[]；
d3.csv（“最终新闻事件”csv）
.row（函数（d）{return{news\u event:d.news\u event}；}）
.get（函数（错误，行）{
console.log（行）；
最终新闻事件=行；
});
d3.选择（“正文”）.附加（“ol”）.选择全部（“文本”）
.数据（最终新闻事件）
.输入（）
.附加（“li”）
.文本（功能（d）{
返回“对象2”；
});

我已经将我的代码推送到github&heroku，因此live heroku网站位于

如果打开此网站上的控制台并转到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>

新段落

白宫将古巴从恐怖主义名单上除名
美国计划加强对退休人员现金的保护
乌克兰的敌对派系被敦促撤出重武器
博科圣地一年前绑架了尼日利亚女孩

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

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

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

在加载文件之前运行，此时

final\u news\u 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);
});

---

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

final\u news\u events

在我看来，您使用的d3库不正确。检查。根据本文，您应该只在回调函数中处理加载的数据。在您的示例中，您使用的是卸载的数据。我建议您将最后一段代码（以d3.select（'body'）开头的代码）移动到get方法中的回调函数中。