javascript
を使用してトポロジグラフを描きましたが、問題はグラフの表示方法です。
私も、ランダム私のノードの位置に力指向のデータを使用し
が、ノードがより多くを得るとき、グラフが悪い
をどのように見えるか、それは以下のようにすることができます:
きれいなトポロジグラフの作成方法
私はどのように行うことができますか?誰かが私が探しているものを教えてもらえますか?
javascript
を使用してトポロジグラフを描きましたが、問題はグラフの表示方法です。
私も、ランダム私のノードの位置に力指向のデータを使用し
が、ノードがより多くを得るとき、グラフが悪い
をどのように見えるか、それは以下のようにすることができます:
きれいなトポロジグラフの作成方法
私はどのように行うことができますか?誰かが私が探しているものを教えてもらえますか?
var root = { name: "root" };
var hosts = [
{ name: "host1", type: "host" },
{ name: "host2", type: "host" },
{ name: "host3", type: "host" }
];
var nodes = [root].concat(hosts);
var links = hosts.map(function(host) {
return { source: root, target: host }
});
hosts.forEach(function(host) {
var hostNum = host.name.substr(4);
for(var i = 0; i <= 5; i++) {
var vm = {
name: "vm-" + hostNum + "-" + i,
type: 'vm'
}
nodes.push(vm);
links.push({
source: host,
target: vm
})
}
});
var force = d3.layout.force()
.size([window.innerWidth, window.innerHeight])
.nodes(nodes)
.links(links)
.charge(-1500)
.gravity(0.1)
.on('tick', update)
.start();
var svg = d3.select('body')
.append('svg')
.attr({
width: window.innerWidth,
height: window.innerHeight
})
var circles = svg.selectAll('circle')
.data(force.nodes())
circles.enter()
.append('circle')
.attr({
r: function(d) { return d.type == 'vm' ? 14 : 20; },
fill: '#1661FE'
});
var lines = svg.selectAll('line')
.data(force.links())
lines.enter()
.append('line')
.attr({
fill: 'none',
stroke: '#1661FE',
'stroke-width': 3
});
var texts = svg.selectAll('text')
.data(force.nodes())
texts.enter()
.append('text')
.text(function(d) { return d.name; })
.attr({
fill: 'white',
'text-anchor': 'middle',
dy: '30'
})
.style({
'font-family': "Verdana, Helvetica, Sans-Serif",
'font-size': 12
});
function update() {
circles.attr({
cx: function(d) { return d.x; },
cy: function(d) { return d.y; }
});
texts.attr({
x: function(d) { return d.x; },
y: function(d) { return d.y; }
})
lines.attr({
x1: function(d) { return d.source.x},
y1: function(d) { return d.source.y},
x2: function(d) { return d.target.x},
y2: function(d) { return d.target.y},
})
}
これは*非常に*かなりかわいい – WearyWanderer
hei、返信しない数日申し訳ありません。私はあなたのデモを試してみるつもりです、ありがとうございます。 – Awakening
@Awakening Cool。ポイントありがとう! – meetamit
任意の提案を参照してください? – Awakening
最初の手順では、通常、同じデータセットまたはネットワークトポロジを提供し、レイアウトで同様の結果が得られるかどうかを確認します。あなたの場合、2つの写真には2つの異なるトポロジがあります。 – MarcoL
関連答えs/o http://stackoverflow.com/a/33199117/1494833 – r0hitsharma