Javascript d3.js-强制布局和节点位置
我分叉并修改了下面的内容。下面是js代码Javascript d3.js-强制布局和节点位置,javascript,arrays,json,dom,d3.js,Javascript,Arrays,Json,Dom,D3.js,我分叉并修改了下面的内容。下面是js代码 var graph = { "nodes": [{ "name": "a", "group": 1 }, { "name": "a", "group": 1 }, { "name": "a", "group": 1 }, { "name": "a", "group": 1 }, { "name": "b", "group": 8 }], "link
var graph = {
"nodes": [{
"name": "a",
"group": 1
}, {
"name": "a",
"group": 1
}, {
"name": "a",
"group": 1
}, {
"name": "a",
"group": 1
}, {
"name": "b",
"group": 8
}],
"links": [{
"source": 1,
"target": 0,
"value": 1
}, {
"source": 2,
"target": 0,
"value": 1
}, {
"source": 3,
"target": 0,
"value": 1
}, {
"source": 4,
"target": 0,
"value": 1
}]
};
var width = 600,
height = 600;
var color = d3.scale.category20();
var force = d3.layout.force()
.charge(-120)
.linkDistance(30)
.size([width, height]);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var drawGraph = function(graph) {
force
.nodes(graph.nodes)
.links(graph.links)
.start();
var link = svg.selectAll(".link")
.data(graph.links)
.enter().append("line")
.attr("class", "link")
.style("stroke-width", function(d) {
return Math.sqrt(d.value);
});
var gnodes = svg.selectAll('g.gnode')
.data(graph.nodes)
.enter()
.append('g')
.classed('gnode', true)
.call(force.drag);
var node = gnodes.append("circle")
.attr("class", "node")
.attr("r", 10)
.style("fill", function(d) {
return color(d.group);
});
node.append("title")
.text(function(d) {
return d.name;
});
var labels = gnodes.append("text")
.text(function(d) {
return d.name;
})
.attr('text-anchor', 'middle')
.attr('font-size', 12.0)
.attr('font-weight', 'bold')
.attr('y', 2.5)
.attr('fill', d3.rgb(50, 50, 50))
.attr('class', 'node-label')
.append("svg:title")
.text(function(d) {
return d.name;
});
force.on("tick", function() {
link.attr("x1", function(d) {
return d.source.x;
})
.attr("y1", function(d) {
return d.source.y;
})
.attr("x2", function(d) {
return d.target.x;
})
.attr("y2", function(d) {
return d.target.y;
})
.each(function(d) {
console.log(Math.sqrt((d.source.x - d.target.x) * (d.source.x - d.target.x) + (d.source.y - d.target.y) * (d.source.y - d.target.y)));
});
gnodes.attr("transform", function(d) {
return 'translate(' + [d.x, d.y] + ')';
});
});
};
drawGraph(graph);
现在我的问题是:
(如何)在“力导向”算法完成渲染后获取并提取节点的位置?我需要将节点位置保存在JSON中,以便在另一个框架中使用预渲染的svg图。最好是基于画布大小600*600的标准化位置值
谢谢你的帮助 您可以使用
end
事件的force
,该事件在所有计算完成后触发。之后,您可以通过var nodes=force.nodes()
获取节点,并根据需要对其进行操作
在这里-打开控制台,在完成所有计算之后,它应该显示具有位置的节点
请注意,它将在每次操作后触发,如果需要,您应该添加一些标志,以避免每次都触发此回调。您可以使用
end
事件的force
,该事件在所有计算完成后触发。之后,您可以通过var nodes=force.nodes()
获取节点,并根据需要对其进行操作
在这里-打开控制台,在完成所有计算之后,它应该显示具有位置的节点
请注意,它将在每次操作后触发,如果需要,您应该添加一些标志,以避免每次都触发此回调。可能这些有帮助:,可能这些有帮助:,