程序设计 force-layout

1

关于堆栈溢出的第一个问题，请多多包涵！我是d3.js的新手，但是一直被其他人能够完成的工作感到惊讶...几乎令我惊讶的是，我本人可以用它取得多少进展！显然，我没有在偷东西，所以我希望这里的善良灵魂能够向我展示光明。我的意图是制作一个可重复使用的javascript函数，该函数可以简单地执行以下操作：在指定的DOM元素中创建空白的力导向图允许您向该图中添加和删除带有标签的带有图像的节点，并指定它们之间的连接我以http://bl.ocks.org/950642作为起点，因为这实际上是我想要创建的布局：这是我的代码： <!DOCTYPE html> <html> <head> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="underscore-min.js"></script> <script type="text/javascript" src="d3.v2.min.js"></script> <style type="text/css"> .link { stroke: #ccc; } .nodetext { pointer-events: none; font: 10px sans-serif; } body { width:100%; height:100%; margin:none; padding:none; } #graph { width:500px;height:500px; border:3px solid black;border-radius:12px; margin:auto; } </style> …

89 javascript d3.js force-layout

5

如何从节点中删除所有子元素，然后以不同的颜色和大小再次应用它们？

因此，我有一个用于设置节点，链接和其他元素的下一个力布局图代码： 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", …

87 d3.js force-layout

6

有没有办法放大D3力布局图？

D3具有指向布局的力量在这里。有没有一种方法可以向该图添加缩放？目前，我能够捕获鼠标滚轮事件，但不确定如何编写重绘函数本身。有什么建议么？ var vis = d3.select("#graph") .append("svg:svg") .call(d3.behavior.zoom().on("zoom", redraw)) // <-- redraw function .attr("width", w) .attr("height", h);

80 javascript jquery d3.js zoom force-layout

1

在D3力向图中突出显示选定的节点，其链接及其子级

我正在D3中制作力导向图。我想通过将所有其他节点和链接设置为较低的不透明度来突出显示mouseover'd节点，其链接及其子节点。在本例中，http://jsfiddle.net/xReHA/，我能够淡出所有链接和节点，然后淡入连接的链接，但是到目前为止，我还不能优雅地淡入是当前鼠标悬停节点的子节点的已连接节点。这是代码中的关键功能： 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 …

70 javascript d3.js highlight force-layout chord

2

在D3强制定向布局中修复节点位置

我希望力导向布局中的某些节点忽略所有力，并基于该节点的属性停留在固定位置，同时仍能够拖动其他节点并对其施加排斥力并保持其链接线。我以为就这么简单： force.on("tick", function() { vis.selectAll("g.node") .attr("transform", function(d) { return (d.someAttribute == true) ? "translate(" + d.xcoordFromAttribute + "," + d.ycoordFromAttribute +")" : "translate(" + d.x + "," + d.y + ")" }); }); 我还尝试过手动设置每个刻度的节点的x和y属性，但是如果该节点受力影响，链接将继续浮动到该节点所在的位置。显然，我对应该如何工作有基本的误解。如何在固定链接的同时仍允许它们可拖动的同时将节点固定在一个位置？

67 javascript d3.js data-visualization force-layout d3-force-directed

Questions tagged «force-layout»