eventListener添加額外的文本元素

Question

我試圖將文本元素添加到svg，但它添加了3個。 我開始使用bind方法添加實際數據，所以我認為這就是問題所在。 但是刪除它並對數據進行硬編碼沒有幫助。 “ d”是具有37個字段的對象。

function handleMouseOver(d, i) {
// Add interactivity
let myLabel = d['ROBBERY'];
var svg = d3.select("svg");

// Use D3 to select element, change color and size
var text = svg.selectAll("text")
    .data(d['ROBBERY'])
    .enter()
    .append("text")
    .attr("id",i);
var textLabels = text
    .attr("x", w-50)

    .attr("y", h-30)
    .text(function () {
        return myLabel;
    })
    .attr("font-family", "sans-serif")
    .attr("font-size", "20px")
    .attr("fill", "red");
// Specify where to put label of text

}

......

.on("mouseover", handleMouseOver)

頁面上沒有其他text元素。

我得到其中的三個：

<text id="5" x="750" y="170" font-family="sans-serif" font-size="20px" fill="red">951</text>
<text id="5" x="750" y="170" font-family="sans-serif" font-size="20px" fill="red">951</text>
<text id="5" x="750" y="170" font-family="sans-serif" font-size="20px" fill="red">951</text>

Answer 1

根據您的評論 ， d['ROBBERY']值為951 。 因此，您得到的是預期的行為（提示： 951的長度為3 ）。

data()方法僅接受三件事：

• 數組;
• 功能；
• 沒有。

因此，當您將一個數字（實際上是一個字符串）傳遞給data() ，它將被視為一個數組。

在這里看看：

 var body = d3.select("body") var data = "951"; var p = body.selectAll(null) .data(data) .enter() .append("p") .text(String) 

 <script src="https://d3js.org/d3.v4.min.js"></script> 

解：

如果僅要附加一個文本元素，請不要使用data() 。 或者，將d['ROBBERY']包裝在[] ，將其轉換為數組：

 var body = d3.select("body") var data = "951"; var p = body.selectAll(null) .data([data]) .enter() .append("p") .text(String) 

 <script src="https://d3js.org/d3.v4.min.js"></script> 

PS ：在您的代碼中獲得951三倍的唯一原因是您正在使用...

.text(function () {
    return myLabel;
})

...打印文本。 如果您使用了數據...

.text(function (d) {
    return d;
})

......你剛才9 ， 5和1 。 試試看，您會看到的。