JavaScriptを使用してSVGサークルを接続します。

Question

ソースサークルとターゲット矩形の間に線を引いてSVGサークルと矩形を接続しようとしています。私のjsonファイルの形式は次のとおりです。

[{"sourceNode":"1","type":"sourceNode"}, 
    {"sourceNode":"3","type":"sourceNode"}, 
    {"sourceNode":"8","type":"sourceNode"}, 
    ..... 
    {"targetNode":"1","type":"targetNode"}, 
    {"targetNode":"7","type":"targetNode"}, 
    {"targetNode":"1","type":"targetNode"}, 
    ..... 
    {"type":"link","source":"1","target":"2"}, 
    {"type":"link","source":"3","target":"4"}, 
    {"type":"link","source":"3","target":"5"}] 

私は、ダーク機能を使って円と線に属性を与えています。サークルは正常に動作しますが、htmlでSVGを調べると属性がない行はありません。ここで

は、コードは次のとおりです。

var nodeSource = g.selectAll("circle") 
    .data(data.filter(function (d){ return d.type == "sourceNode"; })) 
    .enter().append("circle") 
    .attr("r", 5) 
    .style("fill", "blue") 
     .call(force.drag); 

var nodeTarget = g.selectAll("rect") 
    .data(data.filter(function (d){ return d.type == "targetNode"; })) 
    .enter().append("rect") 
    .attr("width", 10) 
    .attr("height", 10) 
    .style("fill", "green") 
     .call(force.drag); 

    var link = g.selectAll("line") 
    .data(data.filter(function (d){ return d.type == "link"; })) 
    .enter().append("line") 
     .style("stroke-width", "2") 
     .style("stroke", "grey") 
     .call(force.drag); 

function tick(e) { 
    nodeSource 
     .attr("cx", function(d) { return d.x = Math.max(radius(), Math.min(width() - radius(), d.x)); }) 
     .attr("cy", function(d) { return d.y = Math.max(radius(), Math.min(height() - radius(), d.y)); }); 

    nodeTarget 
     .attr("x", function(d) { return d.x = Math.max(radius(), Math.min(width() - radius(), d.x)); }) 
     .attr("y", function(d) { return d.y = Math.max(radius(), Math.min(height() - radius(), 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; }); 

     chart.draw() 

} 

Answer 1

あなたがx1、x2を割り当てているときなど、あなたが実際にそれらに値を与えていない、あなたのラインに調整します。 jsonファイルでは、リンクのデータは次のとおりです。

"source": "1" 

たとえば、 d.source.anythingを使用すると、"1"にはプロパティが関連付けられていないため、値を返しません。あなたがこの番号を持っているノードへの参照を取得したい場合、あなたはそれを見つけるためにd3を使用する必要があります。

line.attr('x1', function (d) { 
     return d3.selectAll('circle').filter(function (k) { 
      return d.source === k.sourceNode; 
     }).attr('cx'); 
    }) 

次に、あなたがターゲットノードをしたいとき：

line.attr('x2', function(d) { 
     return d3.selectAll('rect').filter(function (k) { 
      return d.target === k.targetNode; 
     }).attr('x'); 
    })