D3 Force 网络图形周围的凸壳

Question

我正在尝试在我构建的 D3 网络图周围添加一个外壳。 我的网络基于JSFiddle（由于敏感数据无法共享我的网络），基本上最终产品应该是一个有阴影的网络。我在网上看了很多，发现凸包可能是一个解决方案。在尝试在像 http://bl.ocks.org/donaldh/2920551 这样的教程中实现我的数据之后，我必须得出结论，我的基本 D3 知识不足以解决这个问题。

提前谢谢大家！

//Constants for the SVG
var width = 500,
height = 500;

//Set up the colour scale
var color = d3.scale.category20();

//Set up the force layout
var force = d3.layout.force()
.charge(-120)
.linkDistance(30)
.size([width, height]);

//Append a SVG to the body of the html page. Assign this SVG as an object to         svg
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);

//Read the data from the mis element 
var mis = document.getElementById('mis').innerHTML;
graph = JSON.parse(mis);

//Creates the graph data structure out of the json data
force.nodes(graph.nodes)
.links(graph.links)
.start();

//Create all the line svgs but without locations yet
var link = svg.selectAll(".link")
.data(graph.links)
.enter().append("line")
.attr("class", "link")
.style("stroke-width", function (d) {
return Math.sqrt(d.value);
});

//Do the same with the circles for the nodes - no 
var node = svg.selectAll(".node")
.data(graph.nodes)
.enter().append("circle")
.attr("class", "node")
.attr("r", 8)
.style("fill", function (d) {
return color(d.group);
})
.call(force.drag);


//Now we are giving the SVGs co-ordinates - the force layout is generating the         co-ordinates which this code is using to update the attributes of the SVG elements
force.on("tick", function () {
link.attr("x1", function (d) {
    return d.source.x;
})
    .attr("y1", function (d) {
    return d.source.y;
})

Answer 1

通过遵循基本的example here，您应该能够相当容易地合并最小凸包。在基本示例中，船体在此处创建：

var hull = svg.append("path")
    .attr("class", "hull");

并在此处更新：

hull.datum(d3.geom.hull(vertices)).attr("d", function(d) { return "M" + d.join("L") + "Z"; });

但是，我无法让 x 和 y 访问器访问 d.x 和 d.y；在船体上方的示例块中，采用了一个点数组（documentation here，possible solution here）。因此，我创建了一个示例，该示例创建了一个包含所有点的中间变量：

node.data().forEach(function(d,i) {
    vertices[i] = [d.x,d.y]; 
})

然后更新如上例：

hull.datum(d3.geom.hull(vertices)).attr("d", function(d) {  return "M" + d.join("L") + "Z"; });

这是一个block，根据示例小提琴展示了它的实际效果。

D3v4 没有提供太多的精简 - v4 中没有 d3.polygonHull 的访问器函数；我为 v4 创建了一个block here。