我试图在力布局中的所有组上绘制凸包。但我只画出了一半的凸包。当 D3 尝试绘制其余的船体时，控制台返回错误：元素尚未创建。然而，当我检查控制台中的“groups”变量时，所有组数据都在那里，x、y 数据都设置得很好。见下图：
我什至尝试在tick函数中延迟船体的绘制，但它仍然不起作用并且我得到了相同的结果（如下图所示）。
JSFiddle：只得到了一半。我想要的凸包 https://jsfiddle.net/v6b9bwbm/1/
这是代码：
<script>
var radius = 5.5;
var color = d3.scaleOrdinal(d3.schemeCategory20b);
var scale = d3.scaleLinear()
.domain([0.5, 1])
.range([1.8, 3.8]);
var svg2 = d3.select("#svg2");
var w = +svg2.attr("width"),
h = +svg2.attr("height");
var hull = svg2.append("path")
.attr("class", "hull");
var groupPath = function(d) { return "M" + d3.polygonHull(d.values.map(function(i) { return [i.x, i.y]; }))
.join("L") + "Z"; };
function ticked() {
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;
});
fnode
.attr("cx", function (d) {
return d.x = Math.max(radius, Math.min(w - radius, d.x));
})
.attr("cy", function (d) {
return d.y = Math.max(radius, Math.min(h - radius, d.y));
})
.attr("r", radius);
delayHull(6000);
}
function delayHull(delay) {
setTimeout(function() {
svg2.selectAll("path")
.data(groups)
.attr("d", groupPath)
.enter()
.append("path")
.attr("class", "hull")
.attr("d", groupPath);
}, delay);
}
var simulation, link, fnode, groups;
var fnodeg = svg2.append("g")
.attr("class", "fnode");
var linkg = svg2.append("g")
.attr("class", "links")
.attr("id", "linkg");
d3.json("..//vizData//forceLayout//forceLayout_15000.json", function(error, graph) {
if (error) throw error;
simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(function (d) {
return d.id;
}).distance(30).strength(1))
.force("charge", d3.forceManyBody().strength(-2).distanceMin(15).distanceMax(180))
.force("center", d3.forceCenter(w / 2, h / 2))
.force("collide", d3.forceCollide().strength(1).iterations(2));
link = linkg.selectAll("line")
.data(graph.links)
.enter().append("line")
.attr("stroke-width", function (d) {
return scale(d.value);
});
fnode = fnodeg.selectAll("circle")
.data(graph.nodes)
.enter().append("circle")
.attr("r", radius)
.attr("fill", function (d) {
return color(d.truth);
});
simulation
.nodes(graph.nodes);
simulation.force("link")
.links(graph.links);
groups = d3.nest().key(function(d) { return d.group; }).entries(graph.nodes);
simulation.on("tick", ticked);
fnode.append("title")
.text(function (d) { return d.id; });
link.append("title")
.text(function (d) { return d.value; });
})
</script>
我参考了这个http://bl.ocks.org/donaldh/2920551 http://bl.ocks.org/donaldh/2920551凸包示例；他在tick函数之外设置了他的“groups”变量，并且没问题。
我究竟做错了什么？？？
