貝塞爾控制點方向d3

我手動啓動D3的網絡圖（我不喜歡Force Directed的輸出）。爲此，我生成了一個節點數組，每個節點都有一個x/y座標。貝塞爾控制點方向d3

{ 
    "nodes" : [ 
     { 
      "name" : "foo", 
      "to" : ["bar"] 
     }, 
     { 
      "name" : "bar", 
      "to" : ["baz"] 
     }, 
     { 
      "name" : "baz" 
     } 
    ] 

}

我然後生成一個SVG，與親本SVG：g，並且這個數據綁定到SVG系列的：克元件懸掛在母體。

addSvg = function() { 
    // add the parent svg element 
    return d3.select('#visualisation') 
     .append('svg') 
     .attr('width', width) 
     .attr('height', height); 
}; 

addSvgGroup = function (p) { 
    // add a containing svg:g 
    return p.append('svg:g'). 
     attr('transform', 'translate(0,0)'); 
}; 

addSvgNodes = function(p, nodes) { 
    // attach all nodes to the parent p data 
    // and render to svg:g 
    return p.selectAll('g') 
     .data(nodes) 
     .enter() 
     .append('svg:g') 
     .attr('class', 'node'); 
};

然後我手動定位的節點（這將是動態後，我剛開始我的腳）

transformNodes = function (nodes) { 
    // position nodes manually 
    // deprecate later for column concept 
    nodes.attr('transform', function (o, i) { 
     offset = (i + 1) * options.nodeOffset; 
     // options.nodeOffset = 150 
     o.x = offset; 
     o.y = offset/2; 
     return 'translate(' + offset + ',' + offset/2 + ')'; 
    }); 
};

然後附上這些項目父SVG：克，掛一些刪除他們的文字。這會導致在svg中從左向右下降的文字樓梯。到現在爲止還挺好。

接下來，我想要生成一些鏈接，因此我使用一種方法來確定當前節點是否存在關係，然後獲取該節點的位置。最後，我使用d3.svg.diagonal生成一系列鏈接，並將它們的源/目標設置爲適當的節點。爲了清晰起見，書面提醒。

getLinkGenerator = function (o) { 
    return d3.svg.diagonal() 
     .source(o.source) 
     .target(o.target) 
     .projection(function (d) { 
      console.log('projection', d); 
      return [d.x, d.y] 
     }); 

};

到目前爲止，這麼好 - 除了bezier的控制手柄不在我希望它們的位置。例如從節點A到B的距離d的屬性點是這樣的：

<path d="M150,75C150,112.5 300,112.5 300,150" style="fill: none" stroke="#000"></path>

但我想它改變控制手柄的方向 - 即

<path d="M150,75C200,75 250,150 300,150" style="fill: none" stroke="#000"></path>

這將使它看起來更像是來自實例頁面的樹狀圖。我在可摺疊dendrograph例子注意到的是，它返回軸的反轉：

return [d.y, d.x]

但如果我這樣做，而控制點的取向，因爲我想，該點的位置超出重擊（即它們的x/y座標也反轉，有效地轉換他們。

有其他人遇到的一個問題是這樣或有一個如何解決它的想法？

來源

2012-12-13 sunwukung

OK，所以我花了看看這個並找出一個解決方案，似乎一些佈局（樹狀圖，摺疊樹）正在將源/目標的座標反轉路徑鏈接，以便當他們擊中投影調用時，它們被逆轉回到它們的正確位置，但是它們的貝塞爾點的方向被旋轉。因此，如果你手動啓動一個自定義佈局，並且想要水平定位貝塞爾控件（如示例），那就是你需要做的事情。

來源

2012-12-17 16:49:59 sunwukung

貝塞爾控制點方向d3

回答

相關問題