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 。 试试看，您会看到的。