Tag: 强制布局

平静一下力量布局的初始勾号: 我刚刚开始涉足d3，发现学习曲线陡峭。这个过程与我习惯的过程完全不同，math大部分都在我头上。无论如何，我的项目由代表系统之间的集成图的力布局组成。这部分工作得非常好，但我确实有一个主要的关注点，这也是在Michael Bostocks网站上的强制定向布局演示中所表示的：当节点启动时，它们似乎被渲染成canvas。在此之后，一些严重的物理math正在接pipe，模拟引力拉动，使节点在一个相当混乱的path上前后来回，直到它们冷静下来，并在随机坐标上定位。尽pipe这些动作在演示第一次运行的时候就酷了，但是当你试图从公司的networking接口看pipe理员的angular度，服务器不会停下来的时候，一段时间后会变得很烦人。我相信我有这个项目的正确布局设置，因为我确实希望服务器自动布局，我想要看到它们之间的链接。然而，我对引力效应感到矛盾。我在想; 是否可以手动设置每个节点的初始位置，以便我可以将它们靠近引力中心并缩短“跳动时间”一点？

D3.js强制有向图，通过使边相互排斥来减less边交叉: 所以我已经有一个页面绘制一个有力的图，就像这里展示的那样。这工作正常。我从这里使用JS，只需稍作调整即可将节点稍微分散一些。这些或多或less是唯一的区别： d3.json("force.json", function(json) { var force = d3.layout.force() .gravity(0.1) .charge(-2000) .linkDistance(1) .linkStrength(0.1) .nodes(json.nodes) .links(json.links) .size([w, h]) .start(); 在减less链接强度的地方似乎使得链接更像是弹簧，所以它变得类似于经常使用的Fruchterman＆Reingold技术。这工作相当好，但只适用于相当小的图表。随着更大的图表，交叉口的数量正在上升 – 正如人们所期望的那样，但是它所处的解决scheme通常远不是最佳的。我不想找一个方法来获得最佳的解决scheme，我知道这是非常困难的。我只是希望它有一些粗加法，试图强制拆分线以及节点。有没有办法在链接之间以及节点之间添加斥力？我不熟悉D3强制的方式，我似乎无法find任何说这是可能的…

如何从节点中删除所有子元素，然后再以不同的颜色和大小应用它们？: 所以我有下一个强制布局graphics代码来设置节点，链接和其他元素： var setLinks = function () { link = visualRoot.selectAll("line.link") .data(graphData.links) .enter().append("svg:line") .attr("class", "link") .style("stroke-width", function (d) { return nodeStrokeColorDefault; }) .style("stroke", function (d) { return fill(d); }) .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; […]

在D3强制指示图中突出显示所选节点及其链接和子节点: 我正在研究D3中的一个有向图。我想通过将所有其他节点和链接设置为较低的不透明度来突出显示mouseover'd节点，其链接及其子节点。在这个例子中，我可以淡出所有的链接和节点，然后淡入连接的链接，但到目前为止，我还没有能够优雅地淡入淡出连接的节点是当前鼠标hover节点的子节点。这是代码中的关键function： function fade(opacity) { return function(d, i) { //fade all elements svg.selectAll("circle, line").style("opacity", opacity); var associated_links = svg.selectAll("line").filter(function(d) { return d.source.index == i || d.target.index == i; }).each(function(dLink, iLink) { //unfade links and nodes connected to the current node d3.select(this).style("opacity", 1); //THE FOLLOWING CAUSES: Uncaught TypeError: Cannot call method 'setProperty' of undefined […]