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
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com