我正在嘗試span根據以下特定條件附加一個分離的。
const arrow = d3
.create('span')
.classed('arrow', true)
.text('\u2192');
//d3.select('body').append(()=>arrow.node());
const threshold = 16;
d3.selectAll('div')
.each(function(d, i) {
const len = this.textContent.length;
//console.log(len);
d3.select(this)
.append(function() {
const node = arrow.node();
const finalVal = (len <= threshold) ? node : null;
return finalVal;
})
})<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script type="text/javascript" src="https://d3js.org/d3.v7.min.js"></script>
<body>
<div class='text1'>this is line one</div>
<div class='text2'>this is line two</div>
<div class='text3'>this is line three</div>
<div class='text4'>this is line four</div>
</body>
<script type="text/javascript"></script>
</html>但不幸的是，我Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.在瀏覽器控制臺中看到了這個錯誤，而且我希望它span也被附加到第一個 div 中。
uj5u.com熱心網友回復：
嘗試這個 ：
d3.selectAll('div')
.each(function(d, i) {
(this.textContent.length <= threshold) && d3.select(this)
.append(function() {
return arrow.node();
})
})
說明：
在您的代碼中，您試圖追加，null因此您咳出了錯誤。
在這里，我首先檢查條件，然后附加它。
希望這對你有幫助！
uj5u.com熱心網友回復：
除了其他答案所說的（ 1）之外，您的問題是您認為您只需要創建一次分離的元素，然后您可以一次又一次地附加它。
但是，如果您查看有關（D3 內部使用的）的MDN 參考，您會看到：appendChild
如果給定的子節點是對檔案中現有節點的參考，則 appendChild() 將其從當前位置移動到新位置——在將節點附加到其他節點之前，不需要從其父節點中洗掉該節點。這意味著一個節點不能同時在檔案的兩個點上。（這里的重點是我的）。
each這里的解決方案是在回圈內創建分離的元素：
顯示代碼片段
const threshold = 16;
d3.selectAll('div')
.each(function(d, i) {
const len = this.textContent.length;
if (len <= threshold) {
const arrow = d3
.create('span')
.classed('arrow', true)
.text('\u2192');
d3.select(this)
.append(() => arrow.node())
}
})<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script type="text/javascript" src="https://d3js.org/d3.v7.min.js"></script>
<body>
<div class='text1'>this is line one</div>
<div class='text2'>this is line two</div>
<div class='text3'>this is line three</div>
<div class='text4'>this is line four</div>
</body>
<script type="text/javascript"></script>
</html>但是d3.create在這種情況下使用有點毫無意義，因為您可以簡單地以常規方式附加您想要的元素。如果您想繼續使用d3.create，您可以創建一次分離的元素并附加它的克隆：
d3.select(this).append(() => arrow.node().cloneNode(true))
這是演示：
顯示代碼片段
const arrow = d3
.create('span')
.classed('arrow', true)
.text('\u2192');
const threshold = 16;
d3.selectAll('div')
.each(function(d, i) {
const len = this.textContent.length;
if (len <= threshold) {
d3.select(this)
.append(() => arrow.node().cloneNode(true))
}
})<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script type="text/javascript" src="https://d3js.org/d3.v7.min.js"></script>
<body>
<div class='text1'>this is line one</div>
<div class='text2'>this is line two</div>
<div class='text3'>this is line three</div>
<div class='text4'>this is line four</div>
</body>
<script type="text/javascript"></script>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/506782.html
標籤：javascript html d3.js