使用Javascript連接SVG圈子

我想通過在源圓圈和目標矩形之間畫線來連接SVG圓圈和矩形。這裏是我的json文件的格式：使用Javascript連接SVG圈子

[{"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"}]

我正在使用滴答功能給圓和線的屬性。圓圈工作得很好，但當我檢查我的SVG在html中時，我沒有得到沒有屬性的行。

下面是代碼：

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() 

}

來源

2017-07-18 Hamza HASNAOUI

你使用強制佈局？你給force.nodes（）做了什麼？這似乎是force.nodes和force.links中的一個參考文件 –

當你分配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'); 
    })

來源

2017-07-18 17:25:31

使用Javascript連接SVG圈子

回答

相關問題