추가 텍스트 요소를 추가하는 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()을 사용하지 마십시오.

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 : 또는 대안 배열로 돌려, []에 d['ROBBERY']을 포장하는 유일한 이유 코드에 당신이 951 세 번을 얻고있는 것은 당신 있다는 것을 ' 다시 사용하는 중 ...

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

... 텍스트를 인쇄합니다. 당신이 데이터를 사용하면 ...

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

은 ... 당신은 단지 9, 5 및 1있을 것입니다. 그것을 시도하면 볼 수 있습니다.