我一直试图拼凑出这个问题的答案,但我被正式难住了。我正在 D3 中进行强制布局可视化,与http://vallandingham.me/vis/gates/非常相似。当我单击单选按钮时,我遇到的问题是让我的节点进行分组和取消分组。节点会短暂地转移到它们的新位置,但几乎会立即恢复到原来的形式。任何有关此事的帮助将不胜感激!我确实花了几个小时搜索 Jim 的博客/代码,以及其他来自 Bostock 的示例,但无济于事。下面是我的代码。再次,我将不胜感激任何建议...
谢谢
<body>
<form>
<input type="radio" name="radio" value="P1", checked="checked"> Group
<input type="radio" name="radio" value="P2", unchecked> Category Group
</form>
<script src="d3.v3.js"></script>
<script>
var width = 960,
height = 700;
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
//Load Data
d3.csv("data/ski5.csv", function(error, data) {
var rScale = d3.scale.linear()
.domain([0,d3.max(data, function (d) {return d.acres; })])
.range([0, 12]);
var force = d3.layout.force()
.nodes(data)
.size([width, height])
.on("tick", tick)
.charge(charge);
force.alpha()
force.gravity(.45)
force.start()
var node = svg.selectAll("circle")
.data(force.nodes())
.enter()
.append("circle")
.attr("class", "node")
.attr("r", function(d) {return (rScale(d.acres));})
.attr("stroke", "white")
.attr("stroke-width", .5)
.attr("fill", function(d) {return d.color;})
.call(force.drag);
svg.style("opacity", 1e-6)
.transition()
.duration(1300)
.style("opacity", 1);
function charge(d) {
return ((rScale(d.acres)) * (rScale(d.acres)) * (-.65));
}
function tick(e) {
node.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
}
//Radio Button for Category Group
d3.selectAll("input[value=P2]")
.on("change", groupCategory);
function groupCategory() {
data.forEach(function(d, i) {
d.x = d.x + (d.line*10 - d.x) * (.01 + 0.02);
d.y = d.y + (300 - d.y) * (.01 + 0.02);
});
force.start();
}
;})
</script>