d3.js 具有固定布局的绘图网络

Posted

技术标签:

【中文标题】d3.js 具有固定布局的绘图网络【英文标题】:d3.js drawing network with immobilizing layouts 【发布时间】:2012-08-27 12:48:15 【问题描述】:

我目前正在处理由我的前任编写的批处理脚本的可视化结构,它只是从某处重复 SELECT 并插入到某处。我尝试使用树函数,但当我希望 JSON 的同一索引中的相同名称被识别为同一节点时,它使用起来并不灵活。

所以我决定使用强制布局功能,并在谷歌搜索的帮助下几乎完成了。但是,虽然我可以在同一区域映射同一组数据库或脚本以初始化部分,但不知何故 force.on("tick", function() ~~ 重新计算每个节点之间的距离然后它变得非常混乱。但没有这个,它不会显示节点之间的链接。

有谁知道如何在使用 JSON 重新计算链接时固定布局。 我的代码是这样的:

          node.append("circle")
              .attr("cx", function(d)  return d.group*70; )
              .attr("cy", function(d)  return d.index*10; )
              .attr("r", 10)
              .attr("fill", function(d) 
                   return "rgb(" + (255 - d.group*20) + ",0,"+(d.group*50) + ")";
              );

          node.append("text")
              .attr("dx", function(d)return d.group*70;)
              .attr("dy", function(d)return d.index*10;)
              .text(function(d)  return d.name );
          force.on("tick", function() 
              alert(debugPrint(this));
              link.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; );

              node.attr("transform", function(d) 
                  return "translate(" + d.x + "," + d.y + ")";
              );
              //node.attr("transform", function(d)  return "translate(0)"; ); );
          );

【问题讨论】:

【参考方案1】:

如果您添加一个类似function(d) d.fixed = true 的函数并在一个滴答期间(或者可能只是在第一个滴答期间)在每个节点上调用该函数,那么您将拥有一个静态图。否则,您可以在代码运行后(或同样在第一次滴答期间)调用force.stop(),它会完成相同的操作。

我遇到的问题是,在我的代码块末尾调用 force.stop() 会导致图形在正确放置在 SVG 中心之前冻结,因为我不关心我制作的静态图形一个 'mousedown' 事件函数,当一个节点被移动到一个位置时,它使一个节点被固定。

【讨论】:

【参考方案2】:

你可以看看静态的有向可视化http://bl.ocks.org/mbostock/1667139

基本上,您创建一个强制布局,为其分配节点和链接,然后启动它。

然后你运行 force.tick() 方法ticks 次数。这将计算布局中每个节点的位置。您必须尝试使用​​ ticks 的值才能获得好的图表。该值应与图表中的节点数成比例增加。

force = d3.layout.force();

ticks=2000;  //number of ticks for calculating the force layout

force
    .nodes(nodes)  //nodes = array of nodes
    .links(links)  //links = array of links
    .start();

for (var i = ticks; i > 0; --i) force.tick();

force.stop();

您必须在上述代码开始之前执行此操作。

现在您有了力对象,您可以使用它来定位节点和链接。 现在直接将属性分配给节点和链接变量。(以前在tick函数中完成)

您的代码现在将如下所示。

node.append("circle")
    .attr("cx", function(d)return d.group*70; )
    .attr("cy", function(d)return d.index*10;)
    .attr("r", 10)
    .attr("fill",function(d)
        return "rgb(" + (255 - d.group*20) + ",0,"+(d.group*50) + ")"
    )
    .attr("transform", function(d)  return "translate(" + d.x + "," + d.y + ")"; );

node.append("text")
    .attr("dx", function(d)return d.group*70;)
    .attr("dy", function(d)return d.index*10;)
    .text(function(d)  return d.name );

link.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.js 具有固定布局的绘图网络的主要内容,如果未能解决你的问题,请参考以下文章

平滑 D3.js/GeoJSON/TopoJSON/Shapefile 中的弧线/绘图点(沿途某处)

D3.js 基于数据的绘图

D3.js的v5版本入门教程(第十二章)—— D3.js中各种精美的图形

在 d3.js 中配置固定布局的静态图

D3树状图异步按需加载数据

相当于 D3.js 的 Python