个人中心
gpt4 book ai didi

javascript - D3.js 以不同的方式执行

转载 作者：行者123 更新时间：2023-11-28 19:35:53 25 4
gpt4 key购买 nike

我来自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代码:

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

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

为了进行测试，我从 html 文件中删除了最后一个 p 节点，输出包含 2 个空值和 1 个附加相应数据的 p 节点(3) .

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

谁能帮帮我。

谢谢。

最佳答案

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

使用 D3，您想要做的事情并不那么容易，因为您通常不会在特定位置插入元素，而是将它们附加到 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 .

关于javascript - D3.js 以不同的方式执行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25897801/

25 4 0
文章推荐： ios - 是否可以从 NSIndexPath 获取 "global"索引？
文章推荐： django - select_related 与反向外键
文章推荐： python - 删除不在集合中的字典条目
文章推荐： ios - 如何获取文本字段值并通过该文本字段的标记值调用它们
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com