标签: force-layout

我正在努力创建一个带有力布局的无向图.另外,我尝试使用click事件来切换每个圆圈(节点)的颜色.有没有想过在圆形元素上添加这样的事件.我对这段代码进行了调整,但它没有用.

vis.selectAll("circle.node").on("click", function(d){
    vis.select(d).attr(r, 25)
    .style("fill","lightcoral")
    .style("stroke","red");
});

我刚开始使用D3,所以如果有人对我可能没有正确/最佳的事情有任何一般性的建议,请告诉我:)

我正在尝试创建一个Force Directed图,其中节点在中心根节点周围均匀间隔(或足够接近)(以较大的尺寸表示).

这是我想要实现的布局的一个例子(我知道它每次都不一样):

我有以下图表:

var width = $("#theVizness").width(),
    height = $("#theVizness").height();

var color = d3.scale.ordinal().range(["#ff0000", "#fff000", "#ff4900"]);

var force = d3.layout.force()
    .charge(-120)
    .linkDistance(30)
    .size([width, height]);

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

var loading = svg.append("text")
    .attr("class", "loading")
    .attr("x", width / 2)
    .attr("y", height / 2)
    .attr("dy", ".35em")
    .style("text-anchor", "middle")
    .text("Loading...");

/*
ForceDirectData.json
{
    "nodes":[
      {"name":"File1.exe","colorGroup":0},
      {"name":"File2.exe","colorGroup":0},
      {"name":"File3.exe","colorGroup":0},
      {"name":"File4.exe","colorGroup":0},
      {"name":"File5.exe","colorGroup":0},
      {"name":"File6.exe","colorGroup":0},
      {"name":"File7.exe","colorGroup":0},
      {"name":"File8.exe","colorGroup":0},
      {"name":"File8.exe","colorGroup":0},
      {"name":"File9.exe","colorGroup":0}
    ],
    "links":[
      {"source":1,"target":0,"value":10},
      {"source":2,"target":0,"value":35},
      {"source":3,"target":0,"value":50},
      {"source":4,"target":0,"value":50},
      {"source":5,"target":0,"value":65},
      {"source":6,"target":0,"value":65},
      {"source":7,"target":0,"value":81},
      {"source":8,"target":0,"value":98},
      {"source":9,"target":0,"value":100}
    ]
} …

我正在使用D3 JavaScript库将数据显示为强制定向标记.它工作正常.但我无法将点击事件添加到圈子中.所以当我点击圆圈时,我会得到圆圈的详细分析并将其显示在一个模态框中.

var links = [{source: "x", target:"y", type: "paid"},......]';

var nodes = {};

// Compute the distinct nodes from the links.
links.forEach(function(link) {
  link.source = nodes[link.source] || (nodes[link.source] = {name: link.source});
  link.target = nodes[link.target] || (nodes[link.target] = {name: link.target});
});

var w = 950,
    h = 500;

var force = d3.layout.force()
    .nodes(d3.values(nodes))
    .links(links)
    .size([w, h])
    .linkDistance(60)
    .charge(-300)
    .on("tick", tick)
    .start();

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

// Per-type markers, as they don't inherit styles.
svg.append("svg:defs").selectAll("marker")
    .data(["suit", "licensing", …

我正在阅读以下帖子:

突出显示所选节点

真的是一个很好的解决方案......我是d3的新手,并且对它的灵活性着迷.我一度面临问题.我想在html文本框中根据输入的文本(节点名称或id)过滤它,而不是在鼠标悬停时过滤节点.任何想法如何实现这一点？

问候

我已经阅读了很多关于影响力布局的初始动画的内容,但恐怕我还没有理解它.

我已经找到了(并且可以实现)这个例子,关于如何有效地"停止"它.

但我的问题是,是否有可能控制它(即影响"强制停止"所需的时间？).

从文档中可以看出,alpha是要改变的参数,但它没有区别(我尝试了负值,零值和正值,没有任何明显的差异).

这是我想要做的事情的一个方面:yrscc 是我想要做的事情的小提琴.

var force = d3.layout.force()
    .nodes(d3.values(datax.nodes))
    .links(datax.links)
    .size([xViewPortArea.Width, xViewPortArea.Height])
    .linkDistance(xGraphParameters.xLinkDistance)
    .charge(xGraphParameters.xCharge)
    .on("tick", tick)
     .alpha(-5)  // HERE 
    .start();

我的问题:

• alpha的哪个值实际上会影响迭代次数？(我认为它的意思是"*如果值是非正的,并且强制布局正在运行,此方法会在下一个刻度上停止强制布局并在文档中调度"结束"
• 在这个帖子中,一个函数由@JohnS提出,显然可以提供帮助.但我还没有明白应该把它叫做什么.

PS:另一个很酷的选择是在屏幕上显示图像,然后在这里计算背景中的最佳布局.但我放弃了尝试实施它

如何在D3.js中的强制定向布局中关联LinkDistance和LinkStrength？我假设他们是,如果我错了,请纠正我.

我知道linkDistance定义了任何节点对之间的长度,并且在力布局中基本上用作约束.但是linkStrength扮演什么角色？D3.js的API文档将其定义为"在[0,1]范围内指定值的链接的强度(刚性)""刚性"在这里的含义是什么？

我正在使用D3的力布局来组织网络图,一切都很顺利.

但是,我想在我的UI中添加一个按钮,以便用户可以随意播放/暂停布局过程:我想要一个反映布局当前状态的切换按钮:是否计算(d3)当布局稳定时自动停止计算).有没有办法告诉力布局计算何时完成并开始？我期待某种事件来处理这个,但找不到一个.

我有一组数据,我使用d3.js可视化.我以气泡的形式表示数据点,其中气泡的配置如下:

var dot = svg.selectAll("g")
            .data(data)
            .enter()
            .append("g");

dot.append("circle")
  .attr("class", "dot")
  .attr("cx", function(d) { return xp(x(d)); })
  .attr("cy", function(d) { return yp(y(d)); })
  .style("fill", function(d) { return colorp(color(d)); })
  .attr("r", function(d) { return radiusp(radius(d)*2000000); });

dot.append("text")
   .attr("x", function(d) { return xp(x(d)); })
   .attr("y", function(d) { return yp(y(d)); })
   .text(function(d) { return d.name; })

其中xp,yp,colorp和radiusp定义如下:

var xp = d3.scale.log().domain([300, 1e5]).range([0, width]),
   yp = d3.scale.linear().domain([10, 85]).range([height, 0]),
   radiusp = d3.scale.sqrt().domain([0, 5e8]).range([0, 40]),
   colorp = d3.scale.category10();

此时,气泡在其位置上显示为静态(其中位置由xp和yp定义),而气泡的大小基本上来自radiusp,颜色由colorp定义.

现在我正如这个例子那样展示它们: http ://bl.ocks.org/mbostock/4063269

我需要的是以这种形式显示它们: http …

下面是刻度函数的正常示例:

function tick(e) {
     nodes
      .each(cluster(10 * e.alpha * e.alpha));
}

谁能告诉我"e"的定义？它有什么属性？我找不到任何关于"e"的描述,以及e.alpha的含义是什么.是的,我使用谷歌但没有结果.

感谢您在下面给出的帮助.

我正在复制一些使用的代码

var force = d3.layout.force()
        .nodes(nodes)
        .size([width, height])
        .charge(-70)
        .gravity(0.1)
        .on("tick", tick)
        .start();

所以这就是你猜的情况.我是d3的新手,剥离了force.layout API并没有给我任何线索.谢谢你宝贵的时间!

我在这里使用样本中的力导向图 - http://bl.ocks.org/mbostock/4062045

但由于我的数据是定向的,我需要图表中的链接表示为箭头连接.也许就像在http://bl.ocks.org/d3noob/5141278.

有人可以建议创建有向图的更改或添加,如http://bl.ocks.org/mbostock/4062045

我是D3的新手,我找不到解决方案,也许是微不足道的,但是有点帮助是值得赞赏的.