我有一个d3 api,其中我显示的数字之间的关系,我正在使用一个servlet来获取json格式的数据.现在我想要,当我点击某个节点,它的大小会更大.我看到一个例子这个我也试图把这个在我的api,但它的工作不正常.我发布我的代码和该示例的链接.
这是我的代码..
<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>
http://bl.ocks.org/d3noob/5141528
有人请帮助…
解决方法
您需要将点击事件处理程序附加到您的圈子才能执行此操作：
circle.on("click",function() {
d3.select(this).attr("r",12);
});
您可以明显地调整新的半径或从绑定到圆圈的数据中获取.
