javascript - D3 没有在具有多个值的 enter() 数据上创建 DIV

Question

请注意，这不是关于如何获得金条的问题。幸运的是，我已经知道了。这更像是一个为什么不的问题。当现实不符合预期时，通常需要吸取教训。此外，根据非常有用的评论，我意识到诊断不正确，所以我更新了问题。

我刚刚开始尝试使用 D3。按照示例，我得到了一些漂亮的图表。然后，我对此进行了测试(只是为了纯粹出于学术目的积累一些不太常用的方法的知识)。

var graphs = d3.select("#graph").selectAll("div");
graphs.data([1, 2, 3, 4]).enter()
  .append("div").text(function(d){ return d; });

DIV 的数量不变。这让我感到困惑，因为我希望增加 4(如果我为每个这样的元素创建一个 DIV)。当我fiddle代码，它的工作原理。但是，我一直在思考如何解决问题。

• 我检查过 d3.select("#graph") 确实包含一个元素。
• 我已从控制台运行脚本以避免加载顺序问题。

我的页面是 Razor 呈现的局部 View 。所有其他脚本，除了 jQuery，我需要保留它，因为它在页面加载时被调用，都被删除。

...
<div id="#graph" ...></div>
...
@section style{ @Styles.Render("~/Page.css") }
@section script{
  @Scripts.Render("~/Page.js")
  @Scripts.Render("~/Scripts/d3.min.js")
}

Answer 1

我在您的代码中看到了三件事。首先，使用选择器 d3.("#graph")指<div id="graph" /> .您在 HTML 的 ID 中有一个明显的标志。这就是为什么您看不到元素数量增加的原因——它们被创建到不同的组件中。改用这个。

<div id="graph" ...>

另外一点是脚本的顺序。您的标记是错误的，因为您读入了 Page.js之前d3.min.js .如果你没有因为缺少 d3 而出错在onload你的页面(我假设它在第一个)，然后你有多个引用它。这个是不需要的，因为你有一个覆盖它的全局性的。或者您可以像这样切换脚本的顺序并跳过全局脚本。

@section script{
  @Scripts.Render("~/Scripts/d3.min.js")
  @Scripts.Render("~/Page.js")
}

最后一点是关于您的部分。我假设它们是从布局中调用的，并且这只是部分 View 。如果是这样，请注意渲染顺序。在布局的不同阶段调用部分 View 中的部分呈现可能会产生问题。