标签: force-layout
将新节点添加到强制定向布局
关于Stack Overflow的第一个问题,请耐心等待!我是d3.js的新手,但一直对其他人用它能够完成的事情感到惊讶......而且我自己用它做出的一点点进展几乎令人惊讶!很明显,我不是在找东西,所以我希望这里善良的灵魂可以向我展示光明.
我的目的是创建一个可重用的javascript函数,它只执行以下操作:
- 在指定的DOM元素中创建一个空白的力导向图
- 允许您向该图表添加和删除带标签的图像承载节点,并指定它们之间的连接
我把http://bl.ocks.org/950642作为起点,因为这基本上是我想要创建的那种布局:
这是我的代码的样子:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="underscore-min.js"></script>
<script type="text/javascript" src="d3.v2.min.js"></script>
<style type="text/css">
.link { stroke: #ccc; }
.nodetext { pointer-events: none; font: 10px sans-serif; }
body { width:100%; height:100%; margin:none; padding:none; }
#graph { width:500px;height:500px; border:3px solid black;border-radius:12px; margin:auto; }
</style>
</head>
<body>
<div id="graph"></div>
</body>
<script type="text/javascript">
function myGraph(el) {
// Initialise the graph object
var graph = this.graph = {
"nodes":[{"name":"Cause"},{"name":"Effect"}],
"links":[{"source":0,"target":1}]
};
// Add and …推荐指数
解决办法
查看次数
有没有办法放大D3力布局图？
D3 在此处具有力导向布局.有没有办法将缩放添加到此图表？目前,我能够捕获鼠标滚轮事件,但我不确定如何编写重绘功能本身.有什么建议？
var vis = d3.select("#graph")
.append("svg:svg")
.call(d3.behavior.zoom().on("zoom", redraw)) // <-- redraw function
.attr("width", w)
.attr("height", h);
推荐指数
解决办法
查看次数
如何从节点中删除所有子元素,然后使用不同的颜色和大小再次应用它们？
所以我有下一个用于设置节点,链接和其他元素的强制布局图代码:
var setLinks = function ()
{
link = visualRoot.selectAll("line.link")
.data(graphData.links)
.enter().append("svg:line")
.attr("class", "link")
.style("stroke-width", function (d) { return nodeStrokeColorDefault; })
.style("stroke", function (d) { return fill(d); })
.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; });
graphData.links.forEach(function (d)
{
linkedByIndex[d.source.index + "," + d.target.index] = 1;
});
};
var setNodes = function ()
{
node = visualRoot.selectAll(".node")
.data(graphData.nodes)
.enter().append("g")
.attr("id", …推荐指数
解决办法
查看次数
在D3力导向图中突出显示所选节点,其链接及其子节点
我正在研究D3中的力导向图.我想通过将所有其他节点和链接设置为较低的不透明度来突出显示鼠标悬停节点,其链接及其子节点.
在这个例子中,http://jsfiddle.net/xReHA/,我能够淡出所有的链接和节点然后淡化连接的链接,但是,到目前为止,我还没有能够优雅地淡化连接的节点,它们是当前鼠标悬停节点的子节点.
这是代码中的关键功能:
function fade(opacity) {
return function(d, i) {
//fade all elements
svg.selectAll("circle, line").style("opacity", opacity);
var associated_links = svg.selectAll("line").filter(function(d) {
return d.source.index == i || d.target.index == i;
}).each(function(dLink, iLink) {
//unfade links and nodes connected to the current node
d3.select(this).style("opacity", 1);
//THE FOLLOWING CAUSES: Uncaught TypeError: Cannot call method 'setProperty' of undefined
d3.select(dLink.source).style("opacity", 1);
d3.select(dLink.target).style("opacity", 1);
});
};
}
Uncaught TypeError: Cannot call method 'setProperty' of undefined当我尝试在从source.target加载的元素上设置不透明度时,我收到错误.我怀疑这不是将该节点作为d3对象加载的正确方法,但我找不到另一种方法来加载它而不再遍历所有节点以找到与链接的目标或源匹配的节点.为了保持性能合理,我不希望迭代超过所有节点.
我以http://mbostock.github.com/d3/ex/chord.html上的链接淡化为例:
但是,这并未显示如何更改已连接的子节点.
任何有关如何解决或改善这一点的好建议都将被激烈地推崇:)
推荐指数
解决办法
查看次数
修复D3强制定向布局中的节点位置
我希望我的力导向布局中的一些节点忽略力并基于节点的属性保持在固定位置,同时仍然能够被拖动并在其他节点上施加排斥并保持其链接线.我觉得它会像这样简单:
force.on("tick", function() {
vis.selectAll("g.node")
.attr("transform", function(d) {
return (d.someAttribute == true) ?
"translate(" + d.xcoordFromAttribute + "," + d.ycoordFromAttribute +")" :
"translate(" + d.x + "," + d.y + ")"
});
});
我还尝试手动设置节点的x和y属性on-tick,但是如果受到力的影响,链接将继续浮动到节点所在的位置.
显然我对这应该如何工作有一个基本的误解,所以有人可以指出一个例子,其中一些节点固定在它们的位置(但仍然是可拖动的),其余的节点是围绕力导向的,并且所有链接仍在工作？
javascript data-visualization d3.js force-layout d3-force-directed
推荐指数
解决办法
查看次数
D3.js强制有向图,通过使边缘相互排斥来减少边缘交叉
所以我有一个页面已经绘制了一个力导向图,就像这里显示的那样.
这很好.我从这里使用JS ,通过一些调整将节点分散得更好.
这些或多或少是唯一的区别:
d3.json("force.json", function(json) {
var force = d3.layout.force()
.gravity(0.1)
.charge(-2000)
.linkDistance(1)
.linkStrength(0.1)
.nodes(json.nodes)
.links(json.links)
.size([w, h])
.start();
减少链接强度似乎使链接更像弹簧,因此它变得类似于经常使用的Fruchterman和Reingold技术.这种方法效果很好,但仅适用于相当小的图形.对于较大的图形,交叉的数量正在上升 - 正如人们所预料的那样,但它所依赖的解决方案通常远非最佳.我不是在寻找获得最佳解决方案的方法,我知道这非常困难.我只是希望它有一些粗略的添加,试图强制线和节点分开.
有没有办法在链接之间以及节点之间添加排斥？我不熟悉D3力的工作方式,我似乎无法找到任何说这可能的东西......
推荐指数
解决办法
查看次数
如何根据屏幕/浏览器大小制作D3.js中的力布局图
我有一个使用强制布局的图形,但它有一个固定的宽度w和高度h:
var svg = d3.select("#viz").append("svg")
.attr("id", "playgraph")
.attr("width", w)
.attr("height", h)
var force = d3.layout.force()
.nodes(nodes)
.links(links)
.charge(-1600)
.linkDistance(45)
.size([w, h]);
这导致svg图表尽管屏幕或浏览器窗口大小发生了变化但不会缩放或缩小.为了使其响应(即自动调整自身大小),我尝试使用viewBox和preserveAspectRatio属性:
var svg = d3.select("#viz").append("svg")
.attr("id", "playgraph")
.attr("width", w)
.attr("height", h)
.attr("viewBox", "0, 0, 600, 400")
.attr("preserveAspectRatio", "xMidYMid meet");
不幸的是,当我调整浏览器窗口大小时,这没有任何作用.我想知道力图是否.size([w, h])与此有关.
请详细说明如何使用力布局图来使用viewBox和preserveAspectRatio属性.
推荐指数
解决办法
查看次数
冷静一个力布局的初始滴答
我刚开始涉足d3,发现学习曲线相当陡峭.这个过程与我习惯的过程完全不同,数学大多数都超出了我的想象.
无论如何,我的项目包含一个力布局,代表系统之间的集成地图.这部分工作得非常好,但是我确实有一个主要的问题,它也出现在Michael Bostocks网站上的强制定向布局演示中:当节点启动时,它们似乎被渲染出画布.在此之后,一些严肃的物理数学正在接管,模拟一个引力,它在一个相当混乱的路径上来回发送节点,直到它们冷静下来并在一些随机坐标上稳定下来.虽然这些动作在第一次运行演示时会逐渐消失,但是当您尝试查看公司网络接口的状态时,它管理的观点和服务器不会保持静止,一段时间后会变得很烦人.
我确信我有这个项目的正确布局设置,因为我确实希望服务器自动布局,我确实希望可视化它们之间的链接.然而,我对万有引力效应感到矛盾.
我想知道; 是否可以手动设置每个节点的初始位置,以便我可以将它们放在更接近重力中心并稍微缩短"反弹时间"？
推荐指数
解决办法
查看次数
D3js:自动放置标签以避免重叠？(强制排斥)
如何在地图标签上施加力排斥,以便他们自动找到合适的位置？
博斯托克"让我们制作地图"
Mike Bostock的Let's Make a Map(截图如下).默认情况下,标签放在点的坐标处,多边形/多边形的path.centroid(d)+左边或右边的简单对齐,因此它们经常进入冲突状态.
手工制作的标签展示位置
我遇到的一项改进需要添加人为IF修复,并添加所需数量,例如:
.attr("dy", function(d){ if(d.properties.name==="Berlin") {return ".9em"} })
随着要重新调整的标签数量增加,整体变得越来越脏:
//places's labels: point objects
svg.selectAll(".place-label")
.data(topojson.object(de, de.objects.places).geometries)
.enter().append("text")
.attr("class", "place-label")
.attr("transform", function(d) { return "translate(" + projection(d.coordinates) + ")"; })
.attr("dy", ".35em")
.text(function(d) { if (d.properties.name!=="Berlin"&&d.properties.name!=="Bremen"){return d.properties.name;} })
.attr("x", function(d) { return d.coordinates[0] > -1 ? 6 : -6; })
.style("text-anchor", function(d) { return d.coordinates[0] > -1 ? "start" : "end"; });
//districts's labels: polygons objects.
svg.selectAll(".subunit-label") …推荐指数
解决办法
查看次数
当v2没有实现缩放时,为什么d3.js v3会破坏我的力图？
我有一个使用d3.js创建的强制布局
我想同时拥有可拖动力布局的正常功能以及缩放功能.
我基本上复制/粘贴了这个(http://jsfiddle.net/nrabinowitz/QMKm3/)代码的缩放代码.这与Mike Bostock在此(http://bl.ocks.org/mbostock/3680957)示例中使用的缩放方式相同.
这是我的代码:http://jsfiddle.net/kM4Hs/6/
从我的中可以清楚地看到,缩放工作正常,但我无法在力布局中选择单个节点并拖动它们.
我发现其他作者使用d3.v2.js而不是我正在使用的较新的d3.v3.js这个事实.当我将导入更改为v2时,它可以完美运行.但是,为了进步和一般良好的代码,我想尽可能使用v3.
<script type='text/javascript' src='http://d3js.org/d3.v3.min.js'></script>
两个问题:为什么v3在v2没有时打破了力布局,更重要的是,我能做些什么,如果有的话,修复它？
提前致谢!
推荐指数
解决办法
查看次数
标签 统计
d3.js ×10
force-layout ×10
javascript ×7
svg ×2
cartography ×1
chord ×1
graph ×1
highlight ×1
jquery ×1
maps ×1
topojson ×1
zoom ×1