javascript 如何更改 D3 节点的大小 onclick
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21078681/
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
How to change the size of D3 nodes onclick
提问by lucifer
i have a d3 api in which i am showing a relationship between the numbers i am using a servlet to get the data in json format.Now i want that when i click on a certain node its size will be bigger.I have seen an example of this and i also tried to put this in my api but its not working properly.i am posting both my code and the link of that example.
我有一个 d3 api，我在其中显示了我使用 servlet 以 json 格式获取数据的数字之间的关系。现在我希望当我点击某个节点时，它的大小会更大。我看过一个例子对此，我也尝试将其放入我的 api 中，但它无法正常工作。我正在发布我的代码和该示例的链接。
this is my code..
这是我的代码..
<script>
var links = [];
var nodes = {};
// Compute the distinct nodes from the links.
var width = 960, height = 500;
function loadNewData(){
var svg = d3.select("#linkAnalysis").append("svg").attr("width", width).attr(
"height", height);
// Per-type markers, as they don't inherit styles.
svg.append("defs").selectAll("marker").data(
[ "suit", "licensing", "resolved" ]).enter().append("marker")
.attr("id", function(d) {
return d;
}).attr("viewBox", "0 -5 10 10").attr("refX", 15).attr("refY",
-1.5).attr("markerWidth", 6).attr("markerHeight", 6)
.attr("orient", "auto").append("path").attr("d",
"M0,-5L10,0L0,5");
d3.json(
"DirectedServlet",
function(error, directed) {
links=directed.links;
links.forEach(function(link) {
link.source = nodes[link.source]
|| (nodes[link.source] = {
name : link.source
});
link.target = nodes[link.target]
|| (nodes[link.target] = {
name : link.target
});
});
var force = d3.layout.force().nodes(
d3.values(nodes)).links(links).size(
[ width, height ]).linkDistance(60).charge(
-300).on("tick", tick).start();
var path = svg.append("g").selectAll("path").data(
force.links()).enter().append("path").attr(
"class", function(d) {
return "link " + d.type;
}).attr("marker-end", function(d) {
return "url(#" + d.type + ")";
});
var circle = svg.append("g").selectAll("circle")
.data(force.nodes()).enter().append(
"circle").attr("r", 6).call(d3.behavior.drag().origin(function(d) {
return d;
}).on("drag", function(d) {
d.x = d3.event.x, d.y = d3.event.y;
d3.select(this).attr("cx", d.x).attr("cy", d.y);
link.filter(function(l) {
return l.source === d;
}).attr("x1", d.x).attr("y1", d.y);
link.filter(function(l) {
return l.target === d;
}).attr("x2", d.x).attr("y2", d.y);
}));
circle.append("title").text(function(d){
return d.name;
});
var text = svg.append("g").selectAll("text").data(
force.nodes()).enter().append("text").attr(
"x", 8).attr("y", ".31em").text(
function(d) {
return d.name;
});
//selection is happening
var selected = circle.filter(function(d) {
return d.name;
});
selected.each(function(d) {
// d contains the data for the node and this is the circle element
console.log(d.name);
});
var circle = svg.append("g").selectAll("circle")
.data(force.nodes()).enter().append(
"circle").attr("r", 6).on("click",
clickfn).call(force.drag().on("dragstart",dragstart));
var clickfn = function(circle) {
alert();
}
// Use elliptical arc path segments to doubly-encode directionality.
function tick() {
path.attr("d", linkArc);
circle.attr("transform", transform);
text.attr("transform", transform);
}
function linkArc(d) {
var dx = d.target.x - d.source.x, dy = d.target.y
- d.source.y, dr = Math.sqrt(dx * dx
+ dy * dy);
return "M" + d.source.x + "," + d.source.y
+ "A" + dr + "," + dr + " 0 0,1 "
+ d.target.x + "," + d.target.y;
}
function transform(d) {
return "translate(" + d.x + "," + d.y + ")";
}
function dragstart(d) {
d.fixed = true;
d3.select(this).classed("fixed", true);
}
});
}
</script>
this is the link which functionality i want to add in my api
这是我想在我的 api 中添加哪些功能的链接
http://bl.ocks.org/d3noob/5141528
http://bl.ocks.org/d3noob/5141528
somebody please help...
有人请帮助...
回答by Lars Kotthoff
You need to attach a clickevent handler to your circles to do this:
您需要将click事件处理程序附加到您的圈子中才能执行此操作：
circle.on("click", function() {
d3.select(this).attr("r", 12);
});
You can obviously adjust the new radius or get it from data bound to the circle.
您显然可以调整新半径或从绑定到圆的数据中获取它。
回答by Tyler Edwards
For those who are still wondering how to make the previous node go back to its regular size once you click on a new one, here's a simple solution:
对于那些仍然想知道如何在单击一个新节点后使前一个节点恢复其正常大小的人，这里有一个简单的解决方案：
var toRemove;
.on('click', function() {
if(toRemove){
d3.select(toRemove).attr("r", 6);
}
toRemove = this;
d3.select(this).attr("r", 12);
});
Simply store the previous element to the variable toRemove, and then once you click on a new circle, set the radius of the previous element back to its original size.
只需将前一个元素存储到变量中toRemove，然后单击新圆后，将前一个元素的半径设置回其原始大小。
