我有一个小提琴 - http://jsfiddle.net/npmarkunda/pqobc0zv/
如何根据节点所属的节点显示节点。
什么是＆＃34;组＆＃34;？为什么边缘同时具有＆＃34;来源＆＃34;和＃34;目标＆＃34; - 这些价值观是什么？为什么链接具有＆＃34;值＆＃34;？ Aren的链接只是未加权的边缘？我无法理解数据存储的JSON结构。
还有如何将文本呈现为文本而不是SVG。
var graph;
function myGraph() {
// Add and remove elements on the graph object
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.removeLink = function (source, target) {
for (var i = 0; i < links.length; i++) {
if (links[i].source.id == source && links[i].target.id == target) {
links.splice(i, 1);
break;
}
}
update();
};
this.removeallLinks = function () {
links.splice(0, links.length);
update();
};
this.removeAllNodes = function () {
nodes.splice(0, links.length);
update();
};
this.addLink = function (source, target, value) {
links.push({"source": findNode(source), "target": findNode(target), "value": value});
update();
};
var findNode = function (id) {
for (var i in nodes) {
if (nodes[i]["id"] === id) return nodes[i];
}
;
};
var findNodeIndex = function (id) {
for (var i = 0; i < nodes.length; i++) {
if (nodes[i].id == id) {
return i;
}
}
;
};
// set up the D3 visualisation in the specified element
var w = 600,
h = 650;
var color = d3.scale.category10();
var vis = d3.select("body")
.append("svg:svg")
.attr("width", w)
.attr("height", h)
.attr("id", "svg")
.attr("pointer-events", "all")
.attr("viewBox", "0 0 " + w + " " + h)
.attr("perserveAspectRatio", "xMinYMid")
.append('svg:g');
var force = d3.layout.force();
var nodes = force.nodes(),
links = force.links();
var update = function () {
var link = vis.selectAll("line")
.data(links, function (d) {
return d.source.id + "-" + d.target.id;
});
link.enter().append("line")
.attr("id", function (d) {
return d.source.id + "-" + d.target.id;
})
.attr("stroke-width", function (d) {
return d.value / 10;
})
.attr("class", "link");
link.append("title")
.text(function (d) {
return d.value;
});
link.exit().remove();
var node = vis.selectAll("g.node")
.data(nodes, function (d) {
return d.id;
});
var nodeEnter = node.enter().append("g")
.attr("class", "node")
.call(force.drag);
nodeEnter.append("svg:circle")
.attr("r", 12)
.attr("id", function (d) {
return "Node;" + d.id;
})
.attr("class", "nodeStrokeClass")
.attr("fill", function(d) { return color(d.id); });
nodeEnter.append("svg:text")
.attr("class", "textClass")
.attr("x", 14)
.attr("y", ".31em")
.text(function (d) {
return d.id;
});
node.exit().remove();
force.on("tick", function () {
node.attr("transform", function (d) {
return "translate(" + d.x + "," + d.y + ")";
});
link.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;
});
});
// Restart the force layout.
force
.gravity(.01)
.charge(-80000)
.friction(0)
.linkDistance( function(d) { return d.value * 10 } )
.size([w, h])
.start();
};
// Make it all go
update();
}
function drawGraph() {
graph = new myGraph("#svgdiv");
graph.addNode('Sophia');
graph.addNode('Daniel');
graph.addNode('Ryan');
graph.addNode('Lila');
graph.addNode('Suzie');
graph.addNode('Riley');
graph.addNode('Grace');
graph.addNode('Dylan');
graph.addNode('Mason');
graph.addNode('Emma');
graph.addNode('Alex');
graph.addLink('Alex', 'Ryan', '20');
graph.addLink('Sophia', 'Ryan', '20');
graph.addLink('Daniel', 'Ryan', '20');
graph.addLink('Ryan', 'Lila', '30');
graph.addLink('Lila', 'Suzie', '20');
graph.addLink('Suzie', 'Riley', '10');
graph.addLink('Suzie', 'Grace', '30');
graph.addLink('Grace', 'Dylan', '10');
graph.addLink('Dylan', 'Mason', '20');
graph.addLink('Dylan', 'Emma', '20');
graph.addLink('Emma', 'Mason', '10');
graph.addLink('Grace', 'Daniel', '5');
graph.addLink('Alex', 'Mason', '35');
keepNodesOnTop();
// callback for the changes in the network
var step = -1;
function nextval()
{
step++;
return 2000 + (1500*step); // initial time, wait time
}
}
drawGraph();
// because of the way the network is created, nodes are created first, and links second,
// so the lines were on top of the nodes, this just reorders the DOM to put the svg:g on top
function keepNodesOnTop() {
$(".nodeStrokeClass").each(function( index ) {
var gnode = this.parentNode;
gnode.parentNode.appendChild(gnode);
});
}
function addNodes() {
d3.select("svg")
.remove();
drawGraph();
}.link {
stroke: #999;
stroke-width: 1px;
}
.node {
stroke: #999;
stroke-width: 1px;
}
.textClass {
stroke: #555;
font-family: "Lucida Grande", "Droid Sans", Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 14px;
} <script src="http://d3js.org/d3.v3.min.js"></script>
<button onclick="addNodes()">Restart Animation</button>
答案 0 :(得分：0)
D3js有一个linkDistance选项，允许根据值设置两个节点之间的距离。
对于我的示例，我必须设置此linkDistance(function(d) { return (d.value); })
答案 1 :(得分：0)
D3 Force Layout : How to force a group of node to stay in a given area
链接是节点之间的连接。链接的源和目标值指定箭头应指向的方向。您添加到链接JSON对象的长度或距离，或任何自定义属性通常用于指定＆＃34;期望＆＃34; linkDistance，尽管您也可以指定要与重力设置一起使用的权重。
答案 2 :(得分：0)
我使用单独的forcePoints在特定位置聚类我的节点，它涉及每组的额外X和Y值数组
var forcePoint = [
"1":{"x":"200", "y":"400"},
"2":{"x":"300", "y":"600"},
];//etc.
然后，我将节点定位在分配给数据中的位置属性的forcePoint周围。在这种情况下，位置1的节点在SVG上集群到200,400，具有位置2集群的节点集群到300,600。实际的数组是在模拟的上一步中创建的，但是你明白了。
var position = d3.forceSimulation(nodes)
.force('x', d3.forceX((d)=>forcePoint[d.location][0].cx)
.strength(0.8))
.force('y', d3.forceY((d)=>forcePoint[d.location][1].cy)
.strength(0.8))
.force("collide", d3.forceCollide(R * 2));
position.nodes(graph.cells).on('tick', function() {
nodes.attr('transform', (d)=>{
return 'translate(' + (d.x) + ',' + (d.y) + ')';
});
您也可以将它们全部链接到组内的中心节点。