D3 Force网络图形周围的凸包

本文介绍了D3 Force网络图形周围的凸包的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 我试图在我构建的D3网络图上添加一个船体。 我的网络基于此 JSFiddle （由于敏感数据，不能共享我的地址），基本上最终产品应该是一个带有阴影的网络。我在网上阅读了很多内容，发现凸包可能是一个解决方案。在尝试像这样的教程中实现我的数据后， http://bl.ocks.org/donaldh/2920551 ，我必须得出结论，我的基本D3知识不足以解决这个问题。I'm trying to add a hull around the D3 network graph that I've build.My network is based on this JSFiddle (can't share mine because of sensitive data) and basically the end product should be a network with a shade around. I read a lot online and found that a convex hull might be a solution. After trying to implement my data in tutorials like this one http://bl.ocks.org/donaldh/2920551, I must come to the conclusion that my basic D3 knowledge won't be enough to solve this.先谢谢大家！//Constants for the SVGvar width = 500,height = 500;//Set up the colour scalevar color = d3.scale.category20();//Set up the force layoutvar 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 svgvar 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 dataforce.nodes(graph.nodes).links(graph.links).start();//Create all the line svgs but without locations yetvar 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 elementsforce.on("tick", function () {link.attr("x1", function (d) { return d.source.x;}) .attr("y1", function (d) { return d.source.y;}) 推荐答案通过遵循基本的示例，你应该能够很容易地加入最小的凸包，在基本的例子中，这里创建了船体： By following the basic example here, you should be able to incorporate the minimum convex hull fairly easily. In the basic example, the hull is created here:var hull = svg.append("path") .attr("class", "hull");此处更新： And updated here:hull.datum(d3.geom.hull(vertices)).attr("d", function(d) { return "M" + d.join("L") + "Z"; });但是，我无法获得x和y访问器访问 d.x 和 d.y ;在船体上方的示例块中获取一组点（这里的文档，可能的解决方案） 。因此，我创建了一个创建包含所有点的中间变量的示例： However, I was unable to get the x and y accessors to access d.x and d.y; in the example block above the hull takes an array of points (documentation here, possible solution here). So I've created an example that creates an intermediate variable that contains all the points:node.data().forEach(function(d,i) { vertices[i] = [d.x,d.y]; })然后按照上面的例子进行更新： And then updates as in the example above:hull.datum(d3.geom.hull(vertices)).attr("d", function(d) { return "M" + d.join("L") + "Z"; });以下是 block 根据示例小提琴展示它的动作。Here's a block showing it in action based on the example fiddle. D3v4没有提供太多简化 - 没有在v4中的d3.polygonHull的访问器函数;我为这个v4创建了一个 block 。D3v4 doesn't offer much streamlining - there are no accessor functions for d3.polygonHull in v4; I've created a block here for v4. 这篇关于D3 Force网络图形周围的凸包的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！