10
我有一個d3 api，其中我正在顯示數字之間的關係，我正在使用一個servlet來獲取json格式的數據。現在我希望當我點擊某個特定節點的大小將會變得更大。我已經看到了一個這樣的例子，我也試圖把它放在我的api中，但它不能正常工作。我發佈了我的代碼和該示例的鏈接。如何更改D3節點的大小onclick
這是我的代碼..
<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>
這是我想在我的API添加哪些功能鏈接
http://bl.ocks.org/d3noob/5141528
有人請幫助...