标签: force-layout

我是D3的新手,无法设置我的力导向布局的界限.我已经成功地(从示例中)拼凑了我想要的东西,但我需要包含图表.在tick函数中,transform/translate将正确显示我的图形,但是当我使用带有Math.max/min的cx和cy时(参见注释代码),节点固定在左上角,同时正确包含线条.

以下是我的内容......我做错了什么？

var w=960, h=500, r=8,  z = d3.scale.category20();

var color = d3.scale.category20();

var force = d3.layout.force()
       .linkDistance( function(d) { return (d.value*180) } )
       .linkStrength( function(d) { return (1/(1+d.value)) } )
       .charge(-1000)
       //.gravity(.08)
       .size([w, h]);

var vis = d3.select("#chart").append("svg:svg")
       .attr("width", w)
       .attr("height", h)
       .append("svg:g")
       .attr("transform", "translate(" + w / 4 + "," + h / 3 + ")");

vis.append("svg:rect")
   .attr("width", w)
   .attr("height", h)
   .style("stroke", "#000");


d3.json("miserables.json", function(json) {

       var link = vis.selectAll("line.link")
               .data(json.links);

       link.enter().append("svg:line")
               .attr("class", "link")
               .attr("x1", function(d) { return …

我是D3的新手并且正在研究力导向图,其中json数据是动态的.我能够在接收到新数据时更改力图,但这会发生弹跳效应.创建我的力图的代码是:

<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 + ")");
};  

var force = d3.layout.force()
    .gravity(.05)
    .charge(-200)
    .linkDistance( 260 )
    .size([w, h]);

var svg = d3.select(".text")
    .append("svg")
    .attr("width", w)
    .attr("height", h);

d3.json(graph, function(json) {

    var …

我试图在d3 Force Directed Graph中向节点添加文本标签,似乎存在问题.这是我的小提琴:

当我添加节点名称时,如下所示:

node.append("text")
    .attr("class", "word")
    .attr("dy", ".35em")
    .text(function(d) {
        console.log(d.name);
        return d.name;
    });

没有变化,但名字正在记录中.

当我尝试使用边界框时,节点标签出现,但节点堆叠在框的左上角,而节点链接很好.这个小提琴是我投入的努力的结果.任何人都可以告诉我什么是我做错了？

有关力直接图的示例,请访问:http://bl.ocks.org/950642

如何轻松添加拖放支持？它应该将节点设置为固定,并将其放置的当前位置.重要的是,其余节点仍然使用"强制定向模式"自动定位图表中的其余节点

https://github.com/mbostock/d3/wiki/Force-Layout

我玩了一下但没有成功,并想知道是否有人能够给我一个关于如何添加如上所述的支持的快速示例.

我使用D3创建了一个力导向图,并在正常div中显示了节点的id.我需要突出显示在div中单击了id的节点.我搜索了节点的id并使用普通的javascript尝试点击它但它不起作用.

我一直在研究修改后的力导向图,并且在链接没有正确对齐节点的链接上添加文本/标签时遇到一些问题.怎么解决？

以及如何向SVG文本元素添加事件侦听器？添加.on("dblclick",function(d) {....}只是不起作用.

这是代码片段:

<style type="text/css">
    .link { stroke: #ccc; }
    .routertext { pointer-events: none; font: 10px sans-serif; fill: #000000; }
    .routertext2 { pointer-events: none; font: 9px sans-serif; fill: #000000; }
    .linktext { pointer-events: none; font: 9px sans-serif; fill: #000000; }
</style>

<div id="canvas">
</div>

<script type="text/javascript" src="d3/d3.js"></script>
<script type="text/javascript" src="d3/d3.layout.js"></script>
<script type="text/javascript" src="d3/d3.geo"></script>
<script type="text/javascript" src="d3/d3.geom.js"></script>


<script type="text/javascript">

var w = 960,
    h = 600,
    size = [w, h]; // width height    
var vis = d3.select("#canvas").append("svg:svg")
  .attr("width", …

你可以在这个bl.ock http://bl.ocks.org/3012590中看到巴黎有许多地理参考点,小圈子上面有一个大圆圈:

我想得到类似于http://vallandingham.me/vis/gates/的东西,这样圆圈就会被它的边界紧密附加.

对不起,我在这段代码中找不到答案,我想错了.

是否有一个简单的解决方案来获得它？尝试了不同的负电荷力,如果圆形尺寸发生变化会导致问题(如果巴黎的所有圆圈都变得很小,那么它们会相互走得太远)？

我正在使用其中一个强制布局示例(http://bl.ocks.org/1153292)在我的网站上显示一个网络.

我允许用户在任何给定时间选择要查看的链接类型.我注意到当我选择查看链接类型A,然后添加链接类型B然后删除链接类型A时,类型B的剩余链接将显示A颜色.

这是运行以添加到svg图的链接的代码.我正在this.links通过添加和删除它的链接来更改阵列.正如您所看到的,我设置了class属性但它没有更新 - 它仍然是链接A的类型.

var path = svg.append("svg:g")
    .selectAll("path")
    .data(this.links)
   .enter()
    .append("svg:path")
    .attr("class", function(d) { return "link " + d.type; })
    .attr("marker-end", function(d) { return "url(#" + d.type + ")"; });

我目前通过更新tick函数内的class属性来解决这个问题,但这当然会导致很多不需要的工作.

我读到,enter操作返回已存在元素和新元素的合并选择,因此attr操作应更新存在元素并设置新元素.

我错过了什么？

我想回应针对力布局中节点的击键事件.我已经尝试添加我能想到的"击键","按键","键盘","键盘"的所有变体,但它们都没有发射.我的鼠标事件很好.我在d3源代码中找不到任何击键事件....有没有办法捕捉击键？

        nodes.enter().append("circle")
            .on("click", function(d) { return d.clickHandler(self); })
            .on("mouseover", function(d) { return d.mouseOverHandler(self); })
            .on("mouseout", function(d) { return d.mouseOutHandler(self); })
            .on("keyup", function(d) { 
                console.log("keypress", d3.event); // also tried "keyup", "keydown", "key"
            })
            .classed("qNode", true)
            .call(force.drag);

我正在尝试更好地使用力导向布局算法(对于有向图)基本算法工作,即满足以下代码中的isStable条件并且算法结束,但边和节点可以重叠.所以我想在边缘的中间添加一些虚拟顶点(如下图所示),这应该解决这个问题,因为虚拟顶点会使边缘排斥其他边缘和节点.

我添加了addDummies方法,该方法对于不是循环的每个边添加一个节点.我将添加的节点称为midNodes.

然后在每次迭代(迭代方法)中,我将midNodes的位置设置在边缘的中间.剩下的就是旧算法.

我获得了一个没有边缘重叠的更好的布局,但是结果条件从未得到满足,而且,绘图不是很好,因为midNodes在中心节点周围形成一种"甜甜圈",如下图所示( midNodes在红色圆圈内)

我正在寻找一个算法的详细描述,该算法在边缘上使用虚拟节点或任何建议使算法终止并具有更好的绘图(我希望midNodes不要将其他节点排斥到外部区域)

我是否应该将中间节点的新边缘添加到旧节点？

一个解决方案可能是改变isStable条件,但这个数字通常可以保证图形的布局正确,所以我不想触摸它.

编辑:我以这种方式使用以下代码

var layouter = new Graph.Layout.Spring();
while !(layouter.isStable()) {
    layouter.iterate(1);
}

以下是当前代码的摘录

Graph.Layout.Spring = function() {
    this.maxRepulsiveForceDistance = 10;
    this.maxRepulsiveForceDistanceQ = this.maxRepulsiveForceDistance * this.maxRepulsiveForceDistance;
    this.k = 2.5;
    this.k2 = this.k * this.k; 
    this.c = 0.01;

    this.maxVertexMovement = 0.2;

    this.damping = 0.7;
};
Graph.Layout.Spring.prototype = {
resetForUpdate : function() {
    this.addDummies();
    this.currentIteration = 0;
    this.resetVelocities();
},

reset : function() {
    this.pastIterations = 0;
    this.currentIteration = 0;
    this.layoutPrepare();
    this.resetForUpdate();
},


isStable: function() {
    var …