Question

我来自javascript背景，我开始d3.js练习时，我编写了以下代码。

html代码：

<html>
 <head>
  <script type="text/javascript" src="d3.min.js"></script>
 </head>
 <body>
  <p id="firstP"></p>
  <p id="secondP"></p>
  <p id="thirdP"></p>
 </body>
</html>

js code：

var theData = [ 1, 2, 3 ];
var p = d3.select("body").selectAll("p")
       .data(theData)
       .enter()
       .append("p")
       .text( function (d) { return d; } );
console.log(p);

我的动机是，我想在p元素之间添加#firstP,#secondP,#thirdP个节点。但是在我执行上面后，我得到了null d3处理这个问题的方法，我不明白。

对于我的测试，我从html文件中删除了最后一个p节点，输出有2个空值，1个p节点附加了相应的数据（3）。

我不明白d3.js将如何处理这些事情。

任何人都可以帮助我。

感谢。

Answer 1

在您的代码中，您将数据与现有的p元素进行匹配。也就是说，您的选择包含三个p元素，而您的数据包含三个元素。这些与您选择的元素匹配，输入选择为空。有关选择如何工作的详细信息，请参阅this tutorial。

您尝试做的事情并非如此简单，因为您通常不会在特定位置插入元素，而是将它们附加到DOM。但是，您可以使用.insert()来实现它。这是非常人为的，我不建议你在实践中这样做。

var theData = [ 1, 2, 3 ];
var names = ["firstP", "secondP", "thirdP"];
d3.select("body").selectAll("p")
    .data(theData, function(d) { return d; })
   .enter()
    .insert("p", function(d, i) { return d3.select("#" + names[i]).node(); })
   .text( function (d) { return d; } );

完整演示here。

D3.js以不同的方式执行

1 个答案: