标签: force-layout
更新d3强制布局中的现有节点
我使用d3创建了一个力布局,效果很好.我的初始数据是从json文件加载的,并且使用与此d3.js示例类似的技术绘制图表:
现在图表在屏幕上,我需要通过Web套接字从我收到的数据中动态添加,更新和删除节点.我添加和删除方法工作,但我找不到更新现有节点属性的正确方法.
从我所进行的阅读中我收集正确的技术是更改数据源,然后使用enter()方法更新图表.
要更新节点,我正在执行以下操作:
function updateNode(id, word, size, trend, parent_id){
var updateNode = nodes.filter(function(d, i) { return d.id == id ? this : null; });
if(updateNode[0]){
updateNode.size = Number(size);
updateNode.trend = trend;
nodes[updateNode.index] = updateNode;
update();
}
}
然后,更新功能使用以下命令更新节点:
function update(){
node = vis.selectAll('.node')
.data(nodes, function(d) {
return d.id;
})
createNewNodes(node.enter());
node.exit().remove();
force.start();
}
function createNewNodes(selection){
var slct = selection.append('g')
.attr('class', 'node')
.call(force.drag);
slct.append('circle')
.transition()
.duration(500)
.attr('r', function(d) {
if(d.size){
return Math.sqrt(sizeScale(d.size)*40);
}
})
}
我采取了正确的方法吗？当我尝试这个代码时,我尝试在圆上设置radius属性时获得的节点是节点数组中的最后一个节点.即包含分层节点数据而不是单个节点对象的那个.
任何指针都会非常感激,我花了太多时间在这:)
推荐指数
解决办法
查看次数
D3力导向图的节点上的标签/文本
我仍然不明白为什么下面的代码没有显示它的标签/文本...我已经定义了css并在移动到节点上时设置了类似标题的属性:
JSON:
{
"nodes":[
{"name":"t1","group":1},
{"name":"t2","group":1},
{"name":"t3","group":1},
{"name":"t4","group":1},
{"name":"hate","group":2},
{"name":"good","group":2},
{"name":"aiport","group":3},
{"name":"flight","group":3}
],
"links":[
{"source":0,"target":4,"value":4},
{"source":0,"target":5,"value":4},
{"source":1,"target":4,"value":4},
{"source":2,"target":5,"value":4},
{"source":3,"target":5,"value":4},
{"source":4,"target":6,"value":4},
{"source":5,"target":6,"value":4},
{"source":5,"target":7,"value":4}
]
}
码:
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.node {
fill: #555;
stroke: #999;
stroke-width: 1.5px;
}
.link {
stroke: #999;
stroke-opacity: .6;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var width = 1024,
height = 768;
var color = d3.scale.category20();
var force = d3.layout.force()
.charge(-120)
.linkDistance(30)
.size([width, height]);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
d3.json("data.json", function(error, …推荐指数
解决办法
查看次数
d3js链接上的箭头强制布局
我正在使用强制布局来表示定向的未加权网络.我的灵感来自以下示例:http://bl.ocks.org/mbostock/1153292
我尝试制作不同大小的节点,但我有一点问题.用于在每个链接上绘制箭头的标记指向圆的中心.如果圆圈太大,则完全覆盖箭头.
我怎么处理这个？
推荐指数
解决办法
查看次数
如何在强制导向图中禁用动画？
有没有办法在D3强制导向图中禁用动画？
我正在使用这个例子:https://bl.ocks.org/mbostock/4062045
我想在没有初始动画的情况下渲染图形,即显示其最终位置中的所有节点和链接.
推荐指数
解决办法
查看次数
d3.js将点击动作添加到力布局圈？
我正在努力创建一个带有力布局的无向图.另外,我尝试使用click事件来切换每个圆圈(节点)的颜色.有没有想过在圆形元素上添加这样的事件.我对这段代码进行了调整,但它没有用.
vis.selectAll("circle.node").on("click", function(d){
vis.select(d).attr(r, 25)
.style("fill","lightcoral")
.style("stroke","red");
});
推荐指数
解决办法
查看次数
D3.js用于力导向图的算法是什么？
我很想知道D3使用什么算法来实现库中的力导向图功能.阅读了Kobourov关于力导向图的历史的总结让我有点困惑的是,库中使用的确切算法或方法(算法/启发式的组合)是什么.
D3 API参考说Barnes-Hut算法用于计算作用于物体的电荷,O(N*log(N))操作.Kobourov的文章提到Quigley-Eades算法和Hu的算法是利用Barnes-Hut的多级算法.其中一个是在D3中以某种方式使用的吗？
API wiki进一步说,Verlet集成用于粒子定位.在源代码中提到高斯-赛德尔算法,该消息又在提到这两个胡锦涛的算法和德威尔的图形布局文件.我想我正在寻找答案的问题是D3使用的"综合"算法; Kobourov的文章列出了几个和D3强制导向的功能似乎并不适合任何一个.
推荐指数
解决办法
查看次数
如何确定力布局是否完成放置节点？
我有基于力布局的图表.我想放置一个'加载'叠加层,直到图表完成放置节点.我可以使用什么事件/属性来找出该图表？
我检查了API,找不到任何东西..
推荐指数
解决办法
查看次数
D3.js强制布局 - 边缘标签放置/旋转
我对D3.js很新,而且我一直在玩力布局.我试过的一件事就是在链接上放置标签.
一种方法是通过附加svg:text和手动计算translate&rotate,它可以用直线工作.但是,如果链接是一个svg:path(例如弧),这不会按预期工作.在这些情况下,svg:textPath建议解决方案.
在本演示中,您可以看到向链接添加标签的简单实现svg:textPath.唯一的问题是,如果源位于目标的右侧,则文本以相反的方向呈现(从我们的角度来看,它从路径的角度来看仍然是正确的).我的问题是,如何处理这个问题？
我想出的唯一"解决方案"是,在上述情况下手动交换源和目标.在这里,你可以看到它几乎可以工作.
在交换发生的状态下,您还可以看到弧线翻转到另一侧,这看起来并不正确.:(
推荐指数
解决办法
查看次数
D3力导向图,根据数据和值给出不同的形状？
我已经制作了一个力导向图,我想改变数据的节点形状,因为"entity":"company"它们将具有矩形形状,而没有这部分数据的其他数据将是现在的圆形.
你可以在这里看到我的工作示例只有圆形节点:http://jsfiddle.net/dzorz/uWtSk/
我试图if else在代码的一部分中添加带有语句的矩形,其中我将形状附加到节点,如下所示:
function(d)
{
if (d.entity == "company")
{
node.append("rect")
.attr("class", function(d){ return "node type"+d.type})
.attr("width", 100)
.attr("height", 50)
.call(force.drag);
}
else
{
node.append("circle")
.attr("class", function(d){ return "node type"+d.type})
.attr("r", function(d) { return radius(d.value) || 10 })
//.style("fill", function(d) { return fill(d.type); })
.call(force.drag);
}
}
但是在任何节点上我都没有任何形状.
什么是正确的设置方法？
整个代码如下所示:脚本:
var data = {"nodes":[
{"name":"Action 4", "type":5, "slug": "", "value":265000},
{"name":"Action 5", "type":6, "slug": "", "value":23000},
{"name":"Action 3", "type":4, "slug": "", "value":115000}, …推荐指数
解决办法
查看次数
迭代D3js中已经创建的节点
我正在使用强制导向图并将新创建的节点添加到图形中.这完全没问题.
我的节点有一个名为"状态"的属性,不断变化.我面临的问题是,在我的代码中,检查"状态"的条件仅在新节点进入时进行检查.当有更新时,我的JSON将更新为状态但执行无法到达检查状态的代码.
找到我的代码如下:
function buildGraph() {
// Update link data
link = link.data(links);
// Create new links
link.enter().append("g")
.attr("class", "link")
.each(function (d) {
d3.select(this)
.append("line")
.attr("stroke", "#000")
.attr("stroke-width", 2)
.attr("opacity", 0.3);
});
// Delete removed links
link.exit().remove();
// Update node data
node = node.data(nodes);
// Create new nodes
node.enter().append("g")
.attr("class", "node")
.each(function (d) {
if (d.state == "0") { // doesn't come here after an update
var imgId = d.name;
d3.select(this).append("svg:image")
.attr("class", "spinner")
.attr("id", imgId)
.attr("xlink:href", "Images/icons/ajax-loader.gif")
.attr("x", "+16px")
.attr("y", …推荐指数
解决办法
查看次数