Changing text attribute based on event handler in d3.js
I have created a series of circles and a text box based on the following data. See code below.
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;});
I would like to be able to update the textbox with the corresponding "label" data item in the svg "text" text item when clicking in the circle. However, the above code only returns the 1st label item regardless of the circles I click. Appreciate all the help. Thank you!
source to share
I'm not really sure what you are trying to do with text elements - you are creating a text element for each data element, all on top of each other in the same coordinates.
I am assuming you want a single text element to display the label of the circle it was clicked on? If so, you can change the creation of your text elements by just one element:
//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");
And you can change the circle call handler to:
.on("click", function(d){d3.select("text").text(d.label);})
Working example here http://jsfiddle.net/yyESt/
Is this what you are trying to do?
source to share