余分なテキスト要素を追加するeventListener

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()に渡すと、配列として扱われます。

はこちらをご覧：

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 3回を取得していることを唯一の理由は、あなたが「ということです再使用しています...

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

...テキストを印刷します。あなたがデータを使用している場合...

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

...あなただけ9、5と1を持っているでしょう。試してみてください。