标签: force-layout

可以用d3.js layout.force来(重新)定位像div这样的非svg元素吗？

如果div position: absolute;可能left并且top可以用作svg元素的x1和y1属性的等价物？

目标是通过IE8支持对图像和菜单项产生一些强制效果.我知道svg节点可以是图像,但由于我需要支持IE8,因此这不是一个选项.

如果不可能,将svgweb和d3.js一起用于此目的的稳定选项？

谢谢!

****更新

D3真酷!我开始了解它并且肯定可以在常规html元素(如div)上使用" force ",因为它d3.layout.force()基本上为每个"tick"(或框架)提供x和y坐标,但是你可以使用它想.
即:

force.nodes(data)
     .on("tick", tick)
     .start();

function tick() {
     div.style("left", function(d) {return d.x+"px"})
        .style("top", function(d) {return d.y+"px"});
}

工作得很好!

拖动.call(force.drag);确实会给你带来问题(如预期的那样).

萤火虫:

(container.ownerSVGElement || container).createSVGPoint is not a function
d3_svg_mousePoint()d3.js (line 3718)
container = div#nav
e = mousemove clientX=607, clientY=200
mouse()d3.js (line 3711)
container = div#nav
d3_behavior_dragPoint()d3.js (line 4481)
d3_behavior_dragDispatch()d3.js (line 4453)
type = "drag" …

我有一个d3.js静态力布局图可以变得相当大(有时它的一部分被剪裁),所以我想让用户通过拖动平移整个图形.我认为我不需要拖动单个节点,我有一种感觉会让人感到困惑,但是我希望能够显示由svg边界剪切的图形部分.

我在有一个小例子http://bl.ocks.org/3811811它使用

visF.append("rect")
 .attr("class", "background")
 .attr("width", width)
 .attr("height", height)
 .call(d3.behavior.zoom().on("zoom", redrawVisF));
function redrawVisF () {
  visF.attr("transform","translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")");
}

实现平移,但我发现它真的是"闪光"并且根本不是很平滑,我猜它会阻止人们尝试拖动功能.有没有人知道为什么会发生这种情况和/或如何解决它？

我已经实现了这个http://jsbin.com/omokap/3/edit:

但是,我想取消图形的动态行为(如dragend状态,但仅适用于单个节点)并将节点放在设置点中,取自json.

我已经看到这个问题在D3中移动固定节点并在D3强制定向布局中修复节点位置.我不明白如何在我的例子中使用它们.

有人能给我一个帮助吗？

Mike Bostock 有一个关于更新力布局的例子.该示例基于v3 - 如何在v4中复制相同的功能？

这是我(可怜的)尝试.

我已经阅读了 v4 Changelog中对选择的更改,但是这个merge调用仍然令人困惑.特别是,我不清楚数据连接如何与模拟nodes()和links()调用交互.

我正在构建一个树结构(或者在我自己的json中用一组我自己的数据修改其中一个示例)并且我正在尝试创建一些功能:

我的树的布局是从树的例子:http: //mbostock.github.com/d3/ex/cluster.html

我正在添加(向圈子)一个onclick事件,我想要折叠点击节点的子节点.也就是说,当用户点击与节点关联的钢蓝色圆圈时,我希望节点子节点消失.

我已经搜索了文档,我没有发现任何可以让我让节点崩溃或消失的东西.

我能做什么？

如何在 d3.js 中使用 graphml 文件？[我想画一个力有向图]

• 将文件转换为 .json 是否更简单？如何 ？我一直找不到转换器（我找到了一个 python 转换器，但我不是 python 用户）

• 可以直接使用graphml文件吗？可能是 d3.xml 吗？

注意：graphml 看起来像这样

<graph id="G" edgedefault="directed">
<node id="n0">
  <data key="v_name">JohnMaynardKe...</data>
  <data key="v_label">John Maynard Ke...</data>
  <data key="v_size">4</data>
  <data key="v_label.cex">0.3</data>
  <data key="v_frame.color">#ffffff00</data>
  <data key="v_color">#54FF00CC</data>
</node>
<node id="n1">
  <data key="v_name">JosephA.Schum...</data>
  <data key="v_label">Joseph A. Schum...</data>
  <data key="v_size">4</data>
  <data key="v_label.cex">0.3</data>
  <data key="v_frame.color">#ffffff00</data>
  <data key="v_color">#54FF00CC</data>
</node>
<edge source="n0" target="n1">
  <data key="e_nombre">2</data>
  <data key="e_width">2</data>
  <data key="e_arrow.size">0</data>
  <data key="e_color">#00000021</data>
</edge>
<edge source="n0" target="n7">
  <data key="e_nombre">2</data>
  <data key="e_width">2</data>
  <data key="e_arrow.size">0</data>
  <data key="e_color">#00000021</data>
</edge>

....

我在过去的国会期间建立了参议院投票模式的强制导向布局.基于将至少75%的时间投票在一起的任何两位参议员连接起来,有102个节点和2,600个边缘:

我已经使用了电荷,重力和linkDistance的系数,希望找到一个节点不会过于聚集或人为分离的最佳点.使用linkDistance创建的空间比连接两个集群的四个红色节点之间的逻辑空间大得多.不设置linkDistance会导致两个群集相距很远.

是否有基于边缘密度或任何其他社交网络分析指标选择正确值的指导原则？

当前布局定义是:

var force = d3.layout.force()
    .nodes(d3.values(nodes))
    .links(d3.values(links))
    .size([width - 2 * margin, height - 2 * margin])
    .charge(-80)
    .gravity(0.25)
    .linkDistance(50)
    .on("tick", tick)
    .start();

谢谢!

更新:这在jsFiddle上有点复杂,但可以随意在GitHub上克隆或分叉.

我已经能够使用Force Layout构建一个Force Directed Graph.大多数功能都很好用,但我遇到的一个重要问题是,在开始布局时,它会在整个页面(进出画布边界)之间反弹,然后再定位到画布上的位置.

我已经尝试使用alpha来控制它,但它似乎不起作用:

    // Create a force layout and bind Nodes and Links
    var force = d3.layout.force()
        .charge(-1000)
        .nodes(nodeSet)
        .links(linkSet)
        .size([width/8, height/10])
        .linkDistance( function(d) { if (width < height) { return width*1/3; } else { return height*1/3 } } ) // Controls edge length
        .on("tick", tick)
        .alpha(-5) // <---------------- HERE
        .start();

有谁知道如何正确控制Force Layout进入其SVG画布？

我不介意图表漂浮并缓慢安定,但整个图表的疯狂弹跳根本没有吸引力.

BTW,Force Directed Graph示例可在以下位置找到:http://bl.ocks.org/Guerino1/2879486 在此处输入链接描述

谢谢你尽你所能的帮助!

我想用力布局做一些与众不同的事情(用于可视化图形).星座和所有星座都很有趣,但对于时间序列数据来说,它并没有那么有用.我希望能够通过某个轴约束布局,例如,根据节点在数据集中出现的时间布置节点,同时仍然保留可视化的"弹性".这可能使用d3吗？

基于两个D3示例:强制布局(http://bl.ocks.org/mbostock/1095795)和聚集力布局(http://bl.ocks.org/mbostock/1748247),我设法构建了一个力布局用几个独立的重力点来控制节点之间链路顶部的位置.

// Set up map
function map_init(){

    force = d3.layout.force()
        .nodes(nodes)
        .links(links)
        .size([width, height])
        .on("tick", tick);

    svg = d3.select("#map").append("svg")
        .attr("width", width)
        .attr("height", height);

    link = $map.selectAll(".link");
    node = $map.selectAll(".node");

    d3.json("graph.json", function(error, graph) {

        // set up nodes
        for( i = 0; i < graph.nodes.length; i++ ){          
            nodes.push( graph.nodes[i] );
        }

        // position nodes to three different gravity centres based on theme
        for( i = 0; i < nodes.length; i++ ){
            if ( nodes[i].theme == "theme1" ){ …