标签: force-layout
D3/GraphGL强制定向网络可视化的放大镜效果？
推荐指数
解决办法
查看次数
d3 force graph:粘性节点
我想在D3中以一种强制导向的图形布局添加一种行为,这种方式一旦掉落,拖放的svg节点就会粘在它的位置,无论图形中发生什么,都不再改变位置.我已经完成了关于这个API的一些阅读,但我无法找到一种方法来使这个工作.
我试图解决的问题是允许用户"挑选"复杂的力图.
推荐指数
解决办法
查看次数
将d3力导向图的节点包围在圆形或多边形或云中
我已经构建了一个d3带有分组节点的力导向图.我想将这些组封装在云状结构中.我怎样才能做到这一点？
Js Fiddle链接图:http://jsfiddle.net/Cfq9J/5/
我的结果应该与此图像类似:
推荐指数
解决办法
查看次数
d3.js力导向图的不同节点符号
如何在d3.js的强制定向库中将节点显示为不同的符号？我想实现类似于我在下面写的内容:
var node = svg.selectAll(".node")
.data(graph.nodes)
.enter().append(function(d){return d.shape;})
.attr("class", "node")
.attr("r", 5)
.style("fill", function(d) { return color(d.group); })
.call(force.drag);
每个节点都有一个编码形状("rect","circle"等).但是,我收到错误:
Uncaught TypeError: Object function (d){return "circle";} has no method 'indexOf'
我与之相关的另一个问题是:如何在为每个形状应用不同属性之间切换？圆圈需要精炼"r"属性,但rects需要"height"和"width".谢谢!
推荐指数
解决办法
查看次数
D3.js强制有向图,每组颜色不同？
我用d3.js插件创建了一个力导向图,我想根据它们所属的组为不同颜色的节点和标签着色.
我添加了颜色比例:
var color = d3.scale.category20();
以及我添加的节点变量:
.style("fill", function(d) { return color(d.group); })
但是所有节点都是相同的颜色..
这是我目前的情况:http://jsfiddle.net/WBkw9/
完整脚本:
var links = [
{source: "John", target: "Mike", group: "5"},
{source: "John", target: "Janice", group: "5"},
{source: "John", target: "Caleb", group: "5"},
{source: "John", target: "Anna", group: "4"},
{source: "John", target: "Tommy", group: "3"},
{source: "John", target: "Jack", group: "2"},
{source: "John", target: "Vilma", group: "1"},
];
var nodes = {};
// Compute the distinct nodes from the links.
links.forEach(function(link) { …推荐指数
解决办法
查看次数
d3.js:如何在强制布局中更新链接数据时删除节点
我正在使用强制布局图来显示网络,但在更新数据时遇到问题.
我已经检查了如何在基础数据发生变化时更新D3力布局的元素,当然还有"修改力布局"以及来自D3.js 的" mbostock " 的"常规更新模式" (不幸的是,我只能最多发布两个链接...).
我的代码基于"移动专利套装"示例,有一些修改和差异.你可以在这里查看我的完整代码:
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.link {
fill: none;
stroke: #666;
stroke-width: 1.5px;
}
#licensing {
fill: green;
}
.link.licensing {
stroke: green;
}
.link.resolved {
stroke-dasharray: 0,2 1;
}
circle {
fill: #ccc;
stroke: #333;
stroke-width: 1.5px;
}
text {
font: 10px sans-serif;
pointer-events: none;
text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;
}
</style>
<body>
<!-- add an update …推荐指数
解决办法
查看次数
在d3js中从一个强制有向图转换到另一个图
我有两个可折叠力树用于相同的节点.
我还没有看到一个例子,我们可以通过d3js中的节点转换和边缘重建从一棵树转换到另一棵树.
有没有办法做到这一点？
另一个相关的问题是,我们可以初始化强制有向图的每个节点的位置吗？
编辑:这是一个例子.我有两棵树,链接是一棵树,我有另一棵树,它有相同的分子,但树的结构不同.我想如果我可以在不同的树之间为相同的分子或实体制作动画,那将是很好的.
推荐指数
解决办法
查看次数
我想通过厚度来区分d3.js力图的链接
我想通过厚度来区分链接.
我有数据.
变量" value"表示" thickness".
"值"的范围是0~1.
{"nodes":[{"name":"A", "group":1},
{"name":"B", "group":1},
{"name":"C", "group":1},
{"name":"D", "group":1},
{"name":"E", "group":1}],
"links":[{"source":0,"target":1,"value":0.9},
{"source":0,"target":2,"value":0.8},
{"source":0,"target":3,"value":0.7},
{"source":1,"target":2,"value":0.7},
{"source":2,"target":4,"value":0.2},
{"source":0,"target":4,"value":0.5}]}
我的d3.js图形代码是
<!DOCTYPE html>
<meta charset="utf-8">
<body><script src="../d3-master/d3.min.js"></script>
<head><link rel="stylesheet" type="text/css" href="../D3css/D3css.css"></head>
<script>
var width = 960,
height = 500
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var force = d3.layout.force()
.gravity(.05)
.distance(100)
.charge(-100)
.size([width, height]);
d3.json("../data/cor_test.json", function(error, json) {
force
.nodes(json.nodes)
.links(json.links)
.start();
var link = svg.selectAll(".link")
.data(json.links)
.enter().append("line")
.attr("class", "link");
var node = svg.selectAll(".node") …推荐指数
解决办法
查看次数
使用d3js将子元素添加到强制定向图中的特定节点
我想根据节点类型向节点添加不同的子元素.因此,节点具有一个名为的属性type.所有节点都应包含g具有从属子元素的元素.
我通过使用D3s filter功能尝试了这个,但是因为我的代码不会每个节点只添加一次子元素,但是多次添加想要的子元素(与我有节点的数量相同).所以我想我做错了选择.
我的图形的节点和链接随着时间的推移而变化,所以我所做的是首先存储选择,当一个节点被添加到self.nodesi时调用draw函数(我将省略链接代码).
self.domNodes = this.svg.append('g').attr('class', 'nodes').selectAll('.node')
function draw() {
self.domNodes = self.domNodes.data(self.nodes, (node) => node.id)
self.domNodes.exit().remove()
// all nodes
self.domNodes.enter()
.append('g')
.attr('class', (node) => `node ${node.type}`)
.merge(self.domNodes)
// contributions
self.domNodes.filter((d) => d.type === 'contribution')
.append('circle')
.attr('r', 4)
.attr('fill', 'blue')
// persons
self.domNodes.filter((d) => d.type === 'person')
.append('other elements and attributes...')
self.simulation.nodes(self.nodes)
self.simulation.force('link').links(self.links)
self.simulation.alpha(1).restart()
}
什么工作是,它并区分person和contribution并添加元素我特别希望为这种类型,但它不添加只占一个g节点,但它增加了那些(我有节点的数量)的倍数到每一个g节点.如果我继续调用绘制函数,它会向我的g元素添加越来越多的圆圈.
<svg>
<g>
<g class="nodes">
<g class="node contribution" transform="translate(466, …推荐指数
解决办法
查看次数
D3 - 如何在数据值更改时更新力模拟
我在 D3 中遇到了一个关于力模拟的小问题。
我有代表每个国家从 1998 年到 2008 年的贫困率的数据。这是一个气泡图，分为三个集群，分别代表贫困国家、非贫困国家和没有信息的国家。
最初加载应用程序时，它会加载 1998 年的数据。但是，我在顶部有一些按钮，点击后会改变年份，随后气泡应该重新排列。我所能做的就是，当单击按钮时，我更改了一个变量year。但是，在year整个代码中都使用了一些函数和变量。当year发生变化时，我想重新计算所有依赖的节点属性和力参数year
这是我的代码。如果您想尝试一下，我已经包含了所有内容。数据文件在这篇文章的末尾。
async function init() {
// Set up the canvas
var height = 1000, width = 2000;
var svg = d3.select("#panel1").append("svg")
.attr("height", height)
.attr("width", width)
.attr("class", "bubblePanel");
var canvas = svg.append("g")
.attr("transform", "translate(0,0)");
// Choose what year to look at, based on button clicks.
var year = "X1998"
d3.select("#b1998").on("click", function() {
year = "X1998"
console.log(year)
// NOTIFY SIMULATION OF CHANGE //
}) …推荐指数
解决办法
查看次数
标签 统计
d3.js ×10
force-layout ×10
javascript ×7
graph ×3
nodes ×2
svg ×2
colors ×1
jquery ×1
layout ×1
transition ×1
tree ×1