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，您应该能够非常轻松地合并最小凸包。在基本示例中，船体在此处创建：

sigkill

并在此处更新：

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

但是，我无法让x和y访问者访问hull.datum(d3.geom.hull(vertices)).attr("d", function(d) { return "M" + d.join("L") + "Z"; });和d.x;在船体上方的示例块中，采用了一系列点（documentation here，possible solution here）。所以我创建了一个创建包含所有点的中间变量的示例：

d.y

然后按照上面的示例进行更新：

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

这里有一个block根据示例小提琴显示它。

D3v4并没有提供很多精简 - 在v4中没有d3.polygonHull的访问器功能;我为v4创建了block here。

D3 Force网络图形周围的凸壳

1 个答案: