根據d3.js中的事件處理程序更改文本屬性

Question

我根據以下數據生成了一系列圓圈和文本字段。見下面的代碼。

var data = [{"x":534.720996869109,"y":188.402300350323,"label":"ATP","size":5}, 
{"x":526.793135268385,"y":494.495864118909,"label":"PK","size":10}, 
{"x":539.854817710164,"y":332.435549874068,"label":"rpoA","size":10}, 
{"x":528.357841173126,"y":236.960433131191,"label":"rpoB","size":10}] 

var width = 1000,height = 1000; 

var x = d3.scale.linear() 
     .domain([0, 1000]) 
     .range([0, width]); 

var y = d3.scale.linear() 
    .domain([0, 1000]) 
    .range([0, height]); 

var svgContainer = d3.select("body") 
.append("svg:svg") 
.attr("width", width) 
.attr("height",height); 

//text 
var text = svgContainer.selectAll("text") 
     .data(data) 
     .enter() 
     .append("text"); 

var textbAttributes = text 
.attr("x", 800) 
.attr("y", 100) 
.text(function(d) { return ''}) 
.attr("font-family", "sans-serif") 
.attr("font-size", "20px") 
.attr("fill","black"); 

//circles 
var nodesGroup = svgContainer.append("g"); 

var nodes = nodesGroup.selectAll("circle") 
.data(data) 
.enter() 
.append("svg:circle"); 

var nodeattr = nodes 
.attr("cy", function(d,i){return y(d.y); }) 
.attr("cx", function(d,i){return x(d.x); }) 
.on("click", function(){ 
    d3.select("text") 
    .text(function(d,i){return d.label;}) 
    }) 
.attr("r", function(d,i){return d.size;}); 

我希望能夠在點擊圓圈刷新與SVG的文本要素「文字」的相應數據元素「標籤」文本字段。但是，上面的代碼只返回第一個標籤元素，而不管我點擊的是哪個圓圈。感謝所有幫助。謝謝！

Answer 1

我不是很確定你正在嘗試與文本元素做 - 在同一座標您要爲每個數據項的文本元素，都在彼此的頂部。

我的猜測是，你要顯示已單擊圓上的標籤一個文本元素？如果是這樣的話，你可以將文本元素的創建改變只是一個單一的元素：

//text 
var text = svgContainer.append("text") 
    .attr("x", 800) 
    .attr("y", 100) 
    .text('') 
    .attr("font-family", "sans-serif") 
    .attr("font-size", "20px") 
    .attr("fill","black"); 

，您可以在圓圈click處理程序更改爲：這裏

.on("click", function(d){d3.select("text").text(d.label);}) 

工作實例http://jsfiddle.net/yyESt/

這是你正在嘗試做什麼？