我正在尝试向 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) 

页面上没有其他文本元素。

我得到其中 3 个:

<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> 

请您参考如下方法:

根据your comment ，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:在您的代码中出现 3 次 951 的唯一原因是您使用...

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

...打印文本。如果您使用了数据...

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

...您将只有 9、5 和 1。尝试一下，您就会看到。