Tag: force layout
从dynamicjson数据更新强制有向图上的链接
我是D3新手，正在研究JSON数据是dynamic的强制有向图。 我可以在接收到新数据的时候改变力图，但是这种情况会发生。 创build我的强制图的代码是： <div class="graph"></div> <script> var w = 660, h = 700, r = 10; var vis = d3.select(".graph") .append("svg:svg") .attr("width", w) .attr("height", h) .attr("pointer-events", "all") .append('svg:g') .call(d3.behavior.zoom().on("zoom", redraw)) .append('svg:g'); vis.append('svg:rect') .attr('width', w) .attr('height', h) .attr('fill', 'rgba(1,1,1,0)'); function redraw() { console.log("here", d3.event.translate, d3.event.scale); vis.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale […]
如何在D3.js中响应屏幕/浏览器大小制作强制布局graphics
我有一个使用强制布局的graphics，但它具有固定宽度w和高度h ： var svg = d3.select("#viz").append("svg") .attr("id", "playgraph") .attr("width", w) .attr("height", h) var force = d3.layout.force() .nodes(nodes) .links(links) .charge(-1600) .linkDistance(45) .size([w, h]); 这导致了一个svg图表，即使在屏幕或浏览器窗口大小的变化，也不缩放。 为了使它响应（即自动调整自己），我尝试使用viewBox和preserveAspectRatio属性： var svg = d3.select("#viz").append("svg") .attr("id", "playgraph") .attr("width", w) .attr("height", h) .attr("viewBox", "0, 0, 600, 400") .attr("preserveAspectRatio", "xMidYMid meet"); 不幸的是，当我调整浏览器窗口大小时，没有任何反应。 我想知道.size([w, h])与这个有什么关系。 请介绍一下如何使用force布局图来使用viewBox和preserveAspectRatio属性。
有没有办法放大D3力布局图？
D3 在这里有一个强制定向布局。 有没有添加缩放到这个图表的方法？ 目前，我能够捕捉鼠标滚轮事件，但是我不确定如何编写重绘function本身。 有什么build议么？ var vis = d3.select("#graph") .append("svg:svg") .call(d3.behavior.zoom().on("zoom", redraw)) // <– redraw function .attr("width", w) .attr("height", h);
在D3力定向布局中修复节点位置
我希望我的强制布局中的一些节点能够忽略这个力，并且根据这个节点的属性保持在固定的位置上，同时仍然能够被拖拽并且排斥其他节点并保持它们的连接线。 我认为这将是如此简单： force.on("tick", function() { vis.selectAll("g.node") .attr("transform", function(d) { return (d.someAttribute == true) ? "translate(" + d.xcoordFromAttribute + "," + d.ycoordFromAttribute +")" : "translate(" + dx + "," + dy + ")" }); }); 我也尝试过手动设置节点的x和y属性，但是如果节点受到这个力的影响，链接将继续浮动到节点所在的位置。 很明显，我对这个应该如何工作有一个基本的误解，所以有人可能会指出我的一个例子，其中一些节点固定在他们的位置（但仍然可拖动），其余的节点都是围绕着类似于力的方向，所有的链接还在工作？
D3js：自动标签放置，以避免重叠？ （强制排斥）
如何在地图的标签上应用排斥力，自动find合适的位置？ 博斯托克“让我们来做一个地图” 迈克·博斯托克的让我们做一个地图 （截图如下）。 默认情况下，标签放在点的坐标和多边形/多边形的path.centroid(d) +一个简单的左或右alignment，所以他们经常input冲突。 手工制作的标签展示位置 我遇到的一个改进就是需要添加一个人工修改的IF ，并根据需要添加如下内容： .attr("dy", function(d){ if(d.properties.name==="Berlin") {return ".9em"} }) 随着标签数量的增加，整体变得越来越肮脏： //places's labels: point objects svg.selectAll(".place-label") .data(topojson.object(de, de.objects.places).geometries) .enter().append("text") .attr("class", "place-label") .attr("transform", function(d) { return "translate(" + projection(d.coordinates) + ")"; }) .attr("dy", ".35em") .text(function(d) { if (d.properties.name!=="Berlin"&&d.properties.name!=="Bremen"){return d.properties.name;} }) .attr("x", function(d) { return d.coordinates[0] > -1 ? 6 : -6; […]
从svg外面的button中点击d3中的一个节点
我已经使用D3创build了一个强制有向图，并在正常的div中显示了节点的id。 我需要突出显示在div中点击了id的节点。 我已经search的节点的id和使用正常的JavaScript尝试点击它，但它不工作。
添加新的节点到强制指导布局
关于Stack Overflow的第一个问题，请耐心等待！ 我是d3.js的新手，但是一直都很惊讶于别人能够用它来完成什么……而且我几乎同样惊讶于我自己能够取得的进展。 很显然，我不是在寻找什么，所以我希望这里的善良的灵魂能让我看到光明。 我的意图是做一个可重用的JavaScript函数，它只是做以下几点： 在指定的DOM元素中创build一个空白的强制方向图 允许您添加和删除带标记的图像承载节点到该图表，指定它们之间的连接 我以http://bl.ocks.org/950642为起点，因为这实际上是我想要创build的布局types： 这是我的代码看起来像： <!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> </head> <body> […]
为什么在v2不执行的时候d3js v3在执行缩放时会破坏我的强制graphics？
我有一个使用d3.js创build的强制布局 我想同时具有可拖动力布局的正常function以及缩放能力。 我基本上从这个（ http://jsfiddle.net/nrabinowitz/QMKm3/ ）代码复制/粘贴缩放代码。 这与迈克·博斯托克（Mike Bostock）在这个例子中使用的缩放方法是一样的（ http://bl.ocks.org/mbostock/3680957 ）。 这是我的代码： http : //jsfiddle.net/kM4Hs/6/ 正如我可以清楚地看到，缩放工作正常，但我无法在力布局中select单个节点，并拖动它们。 我已经发现，其他作者都使用d3.v2.js而不是我正在使用的新版本的d3.v3.js。 当我改变我的导入到V2，它完美的作品。 但是，为了进步和普遍良好的代码性，我想尽可能使用v3。 <script type='text/javascript' src='http://d3js.org/d3.v3.min.js'></script> versus <script type='text/javascript' src='http://d3js.org/d3.v2.min.js'></script> 两个问题：为什么v3在v2没有时打破力布局，更重要的是，我能做些什么来解决这个问题？ 提前致谢！
