<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.0.4/d3.min.js" integrity="sha512-T 1zstV6Llwh/zH uoc1rJ7Y8tf9N DiC0T3aL0 0blupn5NkBT52Avsa0l XBnftn/14EtxpsztAWsmiAaqfQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
var data = {
"Domains": [ "Domain 1", "Domain 2", "Domain 3" ]
};
d3.selectAll('#domains ul li')
.data(data.Domains)
.join("li")
.text(function(d) {
return d;
});
</script>
</head>
<body>
<h2>Domains</h2>
<div id="domains"><ul></ul></div>
</body>
這是我非常簡單的代碼。我期望它在<li>元素內創建元素<ul>，每個域一個。但它在頭部和身體之間創造了它們！生成的 html（從 Chrome 檢查器中收集）是：
<html><head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.0.4/d3.min.js" integrity="sha512-T 1zstV6Llwh/zH uoc1rJ7Y8tf9N DiC0T3aL0 0blupn5NkBT52Avsa0l XBnftn/14EtxpsztAWsmiAaqfQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
var data = {
"Domains": [ "Domain 1", "Domain 2", "Domain 3" ]
};
d3.selectAll('#domains ul li')
.data(data.Domains)
.join("li")
.text(function(d) {
return d;
});
</script>
</head><li>Domain 1</li><li>Domain 2</li><li>Domain 3</li>
<body>
<h2>Domains</h2>
<div id="domains"><ul></ul></div>
</body></html>
顯然我在做一些愚蠢的事情 - 誰能指出它是什么？
然后我修改了我的腳本如下：
<script>
var data = {
"Domains": [ "Domain 1", "Domain 2", "Domain 3" ]
};
d3.select('#domains ul')
.selectAll('li')
.data(data.Domains)
.join("li")
.text(function(d) {
return d;
});
</script>
在這種情況下，任何<li>地方都沒有添加任何專案，甚至沒有呼叫 text 函式。
幫助？
uj5u.com熱心網友回復：
您選擇的內容與d3.selectAll元素在 DOM 中的插入位置無關。你要使用的是selection.selectAll
將 append 元素加入并輸入到父級：您尚未指定父級，因此元素只是輸入到頁面中，因為如果使用d3.selectAll.
而是選擇您的父元素，ul然后使用該選擇，進行連接：這意味著任何輸入的元素都將附加到我們選擇的父元素，即ul：
d3.select("#domains ul") // return a selection of a parent element
.selectAll("li") // select children we have or want to have
.data(data.Domains)
.join("li") // enter/update/exit children li elements
...
通常，您會看到父項的選擇與變數一起保存的模式。
但是我們還有一個問題，您的代碼在檔案頭中，它在檔案的其余部分加載之前運行，因此您將無法選擇ul. 如果您將腳本放在正文的末尾，您將避免這種情況，或者您可以使用 document.ready 方法。這也是為什么你的li元素被添加到 head 和 body 之間的原因： append 添加東西作為最后一個孩子，但是這些元素不能被附加到 body 之后，因為 body 還沒有被加載
這是一個作業示例：
顯示代碼片段
var data = {
"Domains": [ "Domain 1", "Domain 2", "Domain 3" ]
};
let ul = d3.select("#domains ul");
ul.selectAll("li")
.data(data.Domains)
.join("li")
.text(function(d) {
return d;
});<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.0.0/d3.min.js"></script>
<h2>Domains</h2>
<div id="domains"><ul></ul></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/326021.html
標籤：javascript d3.js