Question

我正在尝试向svg添加一个文本元素，但是它添加了3个。我开始使用绑定方法添加实际数据，所以我认为这是问题。但删除它并硬编码数据没有帮助。 “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>

Answer 1

根据your comment，d['ROBBERY']的值为951。因此，您获得的是预期的行为（提示：951的长度为3）。

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

数组;
一个功能;
没有

因此，当您将数字（实际上是字符串）传递给data()时，它会将其视为数组。

看看这里：

＆＃13;

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

＆＃13;

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

＆＃13;

<强>解决方案：

如果您只有一个文字元素要追加，请不要使用data()。或者，将d['ROBBERY']包裹在[]中，将其转换为数组：

＆＃13;

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

＆＃13;

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

＆＃13;

PS ：您的代码中三次获得951三次的唯一原因是您正在使用...

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

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

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

...您只需9，5和1。试试吧，你会看到。

eventListener添加额外的文本元素

1 个答案: