javascript 根据 d3.js 中的事件处理程序更改文本属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14929212/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Changing text attribute based upon event handler in d3.js
提问by Buthetleon
I've generated a series of circles and a text field based upon the follow 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 refresh the textfield with the corresponding data element "label" in the svg text element "text" upon clicking the circle. However the code above only returns the 1st label element regardless of the circles i click. Appreciate all help. Thanks!
我希望能够在单击圆圈时使用 svg 文本元素“文本”中的相应数据元素“标签”刷新文本字段。但是，无论我单击哪个圆圈，上面的代码都只返回第一个标签元素。感谢所有帮助。谢谢！
回答by Kris
I'm not entirely sure what you are trying to do with the text elements - you are creating a text element for every data item, all on top of each other at the same coordinates.
我不完全确定您要对文本元素做什么 - 您正在为每个数据项创建一个文本元素，所有数据项都在相同的坐标处彼此重叠。
My guess is that you want one text element that displays the label of the circle that has been clicked on? If this is the case you can change the creation of your text elements to just a single 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 click handler to:
您可以将圆点击处理程序更改为：
.on("click", function(d){d3.select("text").text(d.label);})
Working example here http://jsfiddle.net/yyESt/
这里的工作示例http://jsfiddle.net/yyESt/
Is this what you are trying to do?
这是你想要做的吗？
