标签: force-layout
d3.js:强制布局中建议的节点位置
我想创建一个节点具有建议位置的图形,但我还想使用力布局来确保节点本身不重叠.这可能在d3吗？
推荐指数
解决办法
查看次数
D3.JS获取对被点击对象的绑定数据的引用
我是javascript和D3.js的新手
我正在使用https://gist.github.com/4062045上的Force Directed Graph Example
我需要获得对单击的圆元素的绑定数据的引用,以便我可以添加一个链接.
我在圈子的点击处理程序中有以下代码行:
d3.select(this).each(function(d){console.log(d)});
我能够将对象打印到控制台,但我无法弄清楚如何获取对该对象的引用,以便我可以将其推送到链接对象,如:
{source: <reference to node should go here>, target: some_other_node}
感谢你的帮助!
推荐指数
解决办法
查看次数
d3.js强制布局是否允许动态linkDistance？
我正在使用强制布局来表示定向的未加权网络.我的灵感来自以下示例:http://bl.ocks.org/mbostock/1153292
我的问题是,在我的情况下,节点之间有更多的链接,我觉得提供一个固定的linkDistance,总是相同的,是我的布局的一个非常大的约束.
是否可以设置动态linkDistance,以便链接长度增加,如果它有助于减少图形内部的链接交叉？
推荐指数
解决办法
查看次数
D3:在链接中使用节点属性而不是数组中的索引
我是D3.js的初学者,致力于网络可视化,我无法弄清楚如何正确指定力布局的链接.问题是默认情况下,d3将链接的"源"和"目标"解释为"节点"数组中节点的索引.但是,在我的数据中,源和目标引用节点的id号,我将其存储在节点属性中.如何获取指向的链接node.id而不是node.index？这是我想我应该这样做的地方:
var nodes = data.nodes;
var edges = data.edges;
var force = d3.layout.force()
.nodes(d3.values(nodes))
.links(edges)
.size([w, h])
.linkDistance(80)
.charge(-500)
.gravity(0.2)
.on("tick", tick)
.start();
......但我不确定我是否应该修改.nodes()零件或.links()零件.我尝试在它之前添加它:
var nodes = data.nodes;
for (var i = 0; i < nodes.length; i++) {
nodes[i].index = nodes[i].id;
console.log(i + " " + nodes[i].index + " " + nodes[i].id);
}
...但是index当我创建力时,属性才会被覆盖.
我读了这个问题,但唯一的答案似乎有点像黑客.他们还提到了"数据键",但我找不到那些,我不知道如何合并它们,因为我实际上并没有使用这个enter()功能.
推荐指数
解决办法
查看次数
将几个鼠标悬停事件应用于相邻(连接)节点
我有一个网络图(强制导向图),一个散点图和一个全部互连的表(参见jsFiddle).我有互连工作方式我希望它们用于鼠标悬停事件.我想修改我的代码,以便当我将鼠标悬停在网络图中的节点上时,不仅突出显示了moused-over节点(以及它在散点图和表中的连接),而且还突出显示了它的直接邻居节点(以及作为他们在散点图和表格中的连接).
我查看了突出显示所选节点,其链接及其子项的信息,在D3力导向图中寻求帮助.在某个地方(不完全确定在哪里),我找到了一个帮助定义连接节点的函数示例isConnected().
function isConnected(a, b) {
return linkedByIndex[a.index + "," + b.index] || linkedByIndex[b.index + "," + a.index] || a.index == b.index;
}
我想将这个函数合并到我的鼠标悬停事件中,也许还有一个if()声明,这样我就可以完成我想要的所有"突出显示".但是,我是D3和js的新手,我不知道如何设置它.
下面是我想要修改的代码片段(来自jsFiddle).我将不胜感激任何有关其他示例的建议或指示.
var node = svg.selectAll(".node")
.data(graph.nodes)
.enter().append("g")
.attr("class", function(d) { return "node " + d.name + " " + d.location; })
.call(force.drag)
.on("mouseover", function(d) {
// I would like to insert an if statement to do all of these things to the connected nodes
// if(isConnected(d, …推荐指数
解决办法
查看次数
D3强制布局将根节点固定在中心
我设法绘制了一些基本的d3力布局图,但苦苦思索如何修复中心的根节点.
我的数据很简单; 一个具有一级子节点的根节点.只有一个级别.关于我的图表的另一个特别之处是链接距离根据某些参数而变化.
我希望根节点位于图的中心.
将其属性设置为"fixed":true不起作用.任何想法将根节点放在中心？
推荐指数
解决办法
查看次数
根据尺寸收费 - d3力布局
我正在尝试使用力量导向图d3.layout.force,我需要容器可调整大小 - 我希望能够根据大小计算适当的电荷和linkDistance值,或者让d3为我做一些神奇的方式.
我做了一个尝试(链接:http://jsfiddle.net/VHdUe/6/)只使用节点.我将电荷设置为一个值,该值基于适合横跨圆形半径的节点数量.
该解决方案适用于一些中型容器,但如果您单击调整大小几次,您可以看到它并不适用于所有大小的...
我能看到的唯一前进方法是使用svg缩放变换,这会使我的元素大小变得不利.还有其他选择吗？
PS:我已经看过http://mbostock.github.com/d3/talk/20110921/bounding.html(带有边界框的D3力导向布局的答案),但我更倾向于使用基于引力的解决方案而非边界框一个.
推荐指数
解决办法
查看次数
无法在d3中选择SVG foreignObject元素
我正在使用带有SVG foreignObject元素实现的HTML节点标签的d3强制定向布局.我想选择在不同的时间这些元素来更新自己的位置和其他属性(和跟踪他们,因为他们是创建和destoryed enter()和exit()),但我似乎不能够选择他们像其他SVG元素.
这是一个紧凑的例子:
HTML:
<html>
<head>
<title>Cannot Select SVG Foreign Object</title>
<script src="http://d3js.org/d3.v2.js"></script>
<script src = "fo_select.js"></script>
</head>
<body>
<svg id="example_svg" width="600" height="600">
<g>
<circle r="40" cx = "80" cy="80"></circle>
<foreignObject width = "100" height = "100" x = "200" y="200">
<body>Hello, world</body>
</foreignObject>
</g>
</svg>
<script>run()</script>
</body>
</html>
使用Javascript:
function run() {
svg = d3.select("#example_svg");
console.log(svg.selectAll("circle"));
console.log(svg.selectAll("foreignObject"));
}
这也是http://bl.ocks.org/3217448.控制台输出是:
[Array[1]]
[Array[0]]
第一个数组包含circle元素,第二个数组为空.为什么circle对象可以选择,但foreignObject不是？我认为这与它的不寻常性质有关foreignObject.我如何选择它来在我的代码中操作它？非常感谢.
推荐指数
解决办法
查看次数
d3强制定向树上的弯曲线
d3的新手,并尝试开发一个力导向树,我们可以插入varioss数据集.我已经设法启动并运行基本的想法,但想使链接弯曲,所以我可以处理多个链接.我看过http://bl.ocks.org/1153292,我只是没有得到它.我得到的最近是没有路径可见.这是我的直线代码,如果你有时间,我会感激一些帮助
谢谢:
//Sets up the svg that holds the data structure and puts it in the div called mapBox
var svg = d3.select("div#mapBox.theMap").append("svg")
.attr("width", mapWidth)
.attr("height", mapHeight);
//Sets up the data structure and binds the data to it
var force = d3.layout.force()
.nodes(data.nodes)
.links(data.links)
.size([mapWidth, mapHeight])
.charge(-600)
.linkDistance(60)
.start();
//Draws the links and set up their styles
var link = svg.selectAll("link")
.data(data.links)
.enter().append("line")
.attr("class", "link")
.style("stroke", "#ccc")
//Creates nodes and attached "g" element to append other things to …推荐指数
解决办法
查看次数
D3 - 饼图和力导向标签
我正在寻找使用D3创建带有浮动标签的饼图.我是D3的新手,我甚至不确定这是可能的吗？你能以某种方式使用另一张图的标签吗？如果可以的话,你能指点我一个例子吗？
更短的说明:我想要标签:http: //bl.ocks.org/1691430
...在饼图上.
这是我在下面运行的代码:或者在JSBIN中:http://jsbin.com/awilak/1/edit
如果我正确理解他的代码,这是添加标签的部分.我不明白labelForce.update的作用.从那里,我不关心过渡,所以不需要这条线.然后其余的只是绘制圆圈并添加链接/线？如果有人可以整合那将是惊人的,但如果你可以帮助我了解正在发生的事情和我错过的东西,我将不仅仅是感激.
// Now for the labels
// This is the only function call needed, the rest is just drawing the labels
anchors.call(labelForce.update)
labels = svg.selectAll(".labels")
.data(data, function(d,i) {return i;})
labels.exit()
.attr("class","exit")
.transition()
.delay(0)
.duration(500)
.style("opacity",0)
.remove();
// Draw the labelbox, caption and the link
newLabels = labels.enter().append("g").attr("class","labels")
newLabelBox = newLabels.append("g").attr("class","labelbox")
newLabelBox.append("circle").attr("r",11)
newLabelBox.append("text").attr("class","labeltext").attr("y",6)
newLabels.append("line").attr("class","link")
labelBox = svg.selectAll(".labels").selectAll(".labelbox")
links = svg.selectAll(".link")
labelBox.selectAll("text").text(function(d) { return d.num})
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; …推荐指数
解决办法
查看次数
标签 统计
d3.js ×10
force-layout ×10
javascript ×4
svg ×2
graph ×1
highlight ×1
label ×1
mouseover ×1
pie-chart ×1