ノード

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset='utf-8'> 
    <title>Force Layout Example 1</title> 
    <style> 

.node { 
    fill: #ccc; 
    stroke: #fff; 
    stroke-width: 2px; 
} 

.link { 
    stroke: #777; 
    stroke-width: 2px; 
} 
.line { 
    stroke: #777; 
    stroke-width: 2px; 
} 

    </style> 
</head> 
<body> 
    <script src='http://d3js.org/d3.v3.min.js'></script> 
    <script> 

var width = 640, 
    height = 480; 

var nodes = [ 
    { "x": 200, "y": 200 }, 
    { "x": 500, "y": 300 }, 
    { "x": 500, "y": 100 }, 
    //{ "x": 650, "y": 100 }, 
]; 

//var nodes = [ 
    // { "x": 200, "y": 200 }, 
    //   { "x": 500, "y": 300 }, 
    //{ "x": 500, "y": 100 }, 
//]; 
//var links = [ 
    // { source: 0, target: 1 }, 
// { source: 1, target: 2 }, 
//]; 

var links = [ 
    { source: 0, target: 1 }, 
    { source: 0, target: 2 }, 
    //{ source: 1, target: 3 }, 
]; 

var svg = d3.select('body').append('svg') 
    .attr('width', width) 
    .attr('height', height); 


var force = d3.layout.force() 
    .size([width, height]) 
    .nodes(nodes) 
    .links(links); 

force.linkDistance(75); 

var link = svg.selectAll('.link') 
    .data(links) 
    .enter().append('line') 
    .attr('class', 'link'); 

var node = svg.selectAll('.node') 
      .data(nodes) 
      .enter().append('rect') 
      .attr('class', 'node'); 

var subnode = svg.selectAll('.subnode') 
       .data(nodes) 
       .enter().append('circle') 
       .attr('class', 'subnode'); 

var subnode2 = svg.selectAll('.subnode2') 
       .data(nodes) 
       .enter().append('circle') 
       .attr('class', 'subnode2'); 


force.on('end', function() { 
    node.attr("x", function(d) { return d.x; }) 
     .attr("y", function(d) { return d.y; }) 
     .attr("width", 50) 
     .attr("height", 20); 
    subnode.attr('r', width/250) 
      .attr('cx', function(d) { return (d.x); }) 
      .attr('cy', function(d) { return d.y + 10; }); 

    subnode2.attr('r', width/250) 
      .attr('cx', function(d) { return d.x+50; }) 
      .attr('cy', function(d) { return d.y + 10; }); 

    link.attr('x1', function(d) { return d.source.x; }) 
     .attr('y1', function(d) { return d.source.y+ 10; }) 
     .attr('x2', function(d) { return d.target.x+50; }) 
     .attr('y2', function(d) { return d.target.y+ 10; }); 

}); 

force.start(); 
var line; 
function mousedown() { 
    var m = d3.mouse(this); 
    //alert(m[0]+"---"+m[1]); 
    line = svg.append("line") 
     .attr('x1', m[0]) 
     .attr('y1', m[1]) 
     .attr('x2', m[0]) 
     .attr('y2', m[1]); 

    svg.on("mousemove", mousemove); 
} 

function mousemove() { 

    var m = d3.mouse(this); 
    line.attr('x2', m[0]) 
     .attr('y2', m[1]); 
} 

function mouseup() { 
    svg.on("mousemove", null); 
} 
    </script> 
</body> 
</html>

は、上記の溶液は、結果の下に与える：ノード

問題は、私はグラフが逆に描かれ、しかも上記のコードでは、私がコメントアウトされている理由を理解しないであなたがそれらのコメントを外すならば、いくつかのノードとリンクは、全体のノードが完全なランダムな順序で描かれるより多くの混乱があります。すなわち、より多くのノードとリンクを増やすと、より多くの混乱が生じます。

JSBIN参照してください：http://jsbin.com/yuyolof/edit?html

出典

2016-12-27 Srinivas Gadilli

は、私は問題を理解するために、ノードを少し変更しました。このhttp://jsbin.com/bihosuvobi/edit?html,outputを見てみましょうノードはそれぞれのxとyが定義されている場所に描画され、それに応じてxとyを調整するティック関数に従います。私にとっては、すべてが（あなたのリンクデータに基づいて）必要があるように接続されているようです。静的グラフが必要な場合は、forceがあなたのケースに最も適していないか、ノードチャージリンク距離とアルファで少し再生する必要があります。 – mkaran

ノードがどのように接続されて作成されているかを明確にするために、各ノードとリンクにいくつかのラベルを貼り付けました。http://jsbin.com/kohiqohahu/1/edit?html,output – mkaran

（リンク距離の変更：http://jsbin.com/pexifosoqa/1/edit ?: html、console、output） – mkaran

このjsbin http://jsbin.com/himutohimu/1/edit?html,css,output を見てみましょう（私は何が起こっているので良く見て、この中に少しあまりにも多くの情報を追加しました）

同じノードデータを持つ2つのサブノードがあります。

subnode.attr('r', width/250) // black nodes 
      .attr('cx', function(d) { return d.x; }) 
      .attr('cy', function(d) { return d.y + 10; }); 

    subnode2.attr('r', width/250) // red nodes 
      .attr('cx', function(d) { return d.x + 50; }) 
      .attr('cy', function(d) { return d.y + 10; });

これはどういう仕組みになっているのかをよく分かりやすくするため、ノードを色分けしました。あなたの行は、あなたが黒のノードまたは赤のノードのx、yのxとyを追跡するか必要があるサブノードの一種に接続するために

：だから

// x1 and y1 are the starting point of the line, so in order to follow the 
    // red nodes, we need to move accordingly with +50 for x and +10 for y. 
    // the same goes for x2, y2 which are the coordinates for the end of the line 
    link.attr('x1', function(d) { return d.source.x + 50; }) 
     .attr('y1', function(d) { return d.source.y + 10; }) 
     .attr('x2', function(d) { return d.target.x + 50; }) 
     .attr('y2', function(d) { return d.target.y + 10; }); 

//Or if you need your lines to follow the black nodes/ dots then x1, y1 
// and x2,y2 need to move accordingly to your subnode's x and y, 
// so x as it is and y plus 10 
// it is one or the other 
link.attr('x1', function(d) { return d.source.x; }) 
    .attr('y1', function(d) { return d.source.y + 10; }) 
    .attr('x2', function(d) { return d.target.x; }) 
    .attr('y2', function(d) { return d.target.y + 10; });

、それはどのノード（ドット）を接続したいのかを決め、それぞれのxとyに従って線を移動させます。

希望すると便利です。

幸運を祈る！

編集：これは、複数のノードでどのように動作：http://jsbin.com/nodaruwere/1/edit?html,output

出典

2016-12-28 07:47:25 mkaran

私は自分の質問に投稿された画像の鏡像を期待していました。左の矩形の赤い点に近いように、右の黒い点に接続します。 –

私の目的は、次のようなものを作成することです：http://imgur.com/Wqgo96C。私のアプローチは正しいですか？ –

jsplumbと同じですか？私はd3がこれに最も適したツールではないかもしれないと思います。少なくとも、力のレイアウト。これを見てみましょう：http://stackoverflow.com/a/35441959/3433323そして多分これはhttps://bl.ocks.org/cjrd/6863459です。どのドットが接続したいドットに近いかに応じて、線のxとyの位置を設定してみることもできます。このようなものhttp://jsbin.com/lomijusaxo/1/edit?html,output – mkaran

答えて

関連する問題