标签: force-layout
D3/GraphGL强制定向网络可视化的放大镜效果？
推荐指数
解决办法
查看次数
D3的力导向布局基础知识
我正在用d3.js进入激动人心的强制导向布局世界.我已经掌握了d3的基本原理,但我无法弄清楚建立力导向布局的基本系统.
现在,我正在尝试创建一个简单的布局,其中有几个未连接的气泡浮动到中心.很简单吧!？创建了正确的圆圈,但没有任何反应.
编辑:问题似乎是force.nodes()返回初始数据数组.在工作脚本上,force.nodes()返回一个对象数组.
这是我的代码:
<script>
$(function(){
var width = 600,
height = 400;
var data = [2,5,7,3,4,6,3,6];
//create chart
var chart = d3.select('body').append('svg')
.attr('class','chart')
.attr('width', width)
.attr('height', height);
//create force layout
var force = d3.layout.force()
.gravity(30)
.alpha(.2)
.size([width, height])
.nodes(data)
.links([])
.charge(30)
.start();
//create visuals
var circles = chart.selectAll('.circle')
.data(force.nodes()) //what should I put here???
.enter()
.append('circle')
.attr('class','circles')
.attr('r', function(d) { return d; });
//update locations
force.on("tick", function(e) {
circles.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; …推荐指数
解决办法
查看次数
将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) { …推荐指数
解决办法
查看次数
在d3js中从一个强制有向图转换到另一个图
我有两个可折叠力树用于相同的节点.
我还没有看到一个例子,我们可以通过d3js中的节点转换和边缘重建从一棵树转换到另一棵树.
有没有办法做到这一点？
另一个相关的问题是,我们可以初始化强制有向图的每个节点的位置吗？
编辑:这是一个例子.我有两棵树,链接是一棵树,我有另一棵树,它有相同的分子,但树的结构不同.我想如果我可以在不同的树之间为相同的分子或实体制作动画,那将是很好的.
推荐指数
解决办法
查看次数
D3强制布局:链接和节点--- z-index(？)
D3:节点和链接之间的问题
我创建了以下jsfiddle以了解我正在尝试实现的目标:
我希望节点结束(？)链接...
请帮我.对不起我的英文:)
脚本看起来像这样:
function myGraph(el) {
this.addNode = function (id) {
nodes.push({ "id": id });
update();
}
this.removeNode = function (id) {
var i = 0;
var n = findNode(id);
while (i < links.length) {
if ((links[i]['source'] == n) || (links[i]['target'] == n)) links.splice(i, 1);
else i++;
}
nodes.splice(findNodeIndex(id), 1);
update();
}
this.addLink = function (source, target) {
links.push({ "source": findNode(source), "target": findNode(target) });
update();
}
var findNode = function (id) {
for (var i in …推荐指数
解决办法
查看次数
防止力导向图中的节点重叠
我已经为社交网络分析构建了一个力导向图.
我面临的问题是节点彼此重叠,
如何防止强制有向图中节点重叠？
这是我的虚拟数据代码
以下是我的力导向图的图像
如何删除这些节点的重叠？如何在链接之间保持至少一段距离,以便链接正确可见？
推荐指数
解决办法
查看次数
我想通过厚度来区分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") …推荐指数
解决办法
查看次数
如何向d3.js强制气泡图添加标签
我正在尝试修改此代码bl.ocks.org/mbostock/7881887,以便我可以使用该技术来显示一个词云,其中圆圈大小相对于文件中的单词的数量,但我的主要问题是一刻找出如何在圆圈中添加文字.很诱人地,我可以看到在代码中看起来像函数的函数... node.append("text")？所以我假设我能够在节点函数中向"d"添加"name"值,然后我们就去了.如你所见,我刚刚添加了名称:text其中text ="Test"为d.任何帮助让任何文字出现在这些圈子内或附近的任何帮助都将非常感激!我是新的D3,你可能会说,并且已经花了很多个晚上用谷歌搜索这个什么都没找到.我可以看到一个不同类型的图表上的例子......力量布局,例如http://bl.ocks.org/mbostock/1093130但它们看起来如此不同我不能将一个应用于另一个:-(
这是我的jsfiddle https://jsfiddle.net/TimBrighton/vn7reroe/1/
var width = 960,
height = 500,
padding = 1.5, // separation between same-color nodes
clusterPadding = 6, // separation between different-color nodes
maxRadius = 12;
var n = 100, // total number of nodes
m = 5; // number of distinct clusters
var color = d3.scale.category10()
.domain(d3.range(m));
// The largest node for each cluster.
var clusters = new Array(m);
var nodes = d3.range(n).map(function() {
test="Test";
var i = Math.floor(Math.random() * m),
r …推荐指数
解决办法
查看次数
标签 统计
d3.js ×10
force-layout ×10
javascript ×5
nodes ×2
svg ×2
bubble-chart ×1
colors ×1
graph ×1
jquery ×1
overlap ×1
transition ×1
tree ×1
word-cloud ×1
z-index ×1