SVG標記不能正確定位在用作D3力佈局鏈接的d3.svg.diagonal曲線上

我對SVG和d3.js有點新鮮。SVG標記不能正確定位在用作D3力佈局鏈接的d3.svg.diagonal曲線上

使用D3強制佈局繪製圖形時，我使用了一個簡單的對角線生成器，並使用標記結束來繪製箭頭。

當使用圓弧代替對角線發生器時，箭頭顯示得很好。但是，使用對角線產生像下面的代碼中不會產生正確的標記：

var vis = this.vis = d3.select(el).append("svg:svg") 
    .attr("width", w) 
    .attr("height", h); 

var force = d3.layout.force() 
    .gravity(0.03) 
    .distance(120) 
    .charge(-800) 
    .size([w, h]); 

var linkDiag = d3.svg.diagonal() 
    .projection(function(d) 
    { 
     return [d.x, d.y]; 
    }); 

vis.append("svg:defs") 
     .selectAll("marker") 
    .data(["normal", "special", "resolved"]) 
    .enter() 
     .append("svg:marker") 
    .attr("id", String) 
    .attr("viewBox", "0 -5 10 10") 
    .attr("refX", 15) 
    .attr("refY", -1.5) 
    .attr("markerWidth", 6) 
    .attr("markerHeight", 6) 
    .attr("orient", "auto") 
    .append("svg:path") 
    .attr("d", "M 0,-5 L 10,0 L0,5");

...然後也：

force.on("tick", function() { 
     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; }) 
     .attr("d", linkDiag) 
     .attr("marker-end", function(d) { return "url(#special)"; }); 

    });

的標記並不是在所有的頂點爲導向。

任何幫助，將不勝感激！

來源

2012-05-23 ronnen

你有能力解決這個問題嗎？在我的情況下，我意識到我的圓形節點很大，標記正在渲染，但始終呈現在圓圈後面。儘管如此，我仍然遇到問題，但確定標記的正確refX，refY等值：/ – dchang

我也很好奇如果有解決方案。 –

你能指出你問題多一點嗎？然而甚至運行你的代碼，我認爲你的問題可能是

.attr("orient", "auto")

嘗試指定POS

來源

2012-06-04 12:51:38

只好像箭頭沒有指向正確的方向，因爲你移動的箭頭出現通過refX和refY轉移到新的位置。

例如，檢查出this code，它在各個方向繪製對角線。箭頭正確顯示，除了180度的箭頭外，但這可能是由於舍入錯誤。

現在，嘗試將第10行的refX更改爲例如5的值。現在，接近水平的箭頭顯示不正確。要更加顯着地看到這一點，請嘗試將值更改爲8.

發生什麼事是您隱藏對角線的一部分，因此該線似乎在較早的點結束，該點與實際的最終點略有不同，點。如果箭頭太大以至於覆蓋曲線的一部分，也會發生同樣的情況。請注意，對於d3中對稱的貝塞爾曲線中的對角線，箭頭應始終呈現完全水平或垂直指向。您可以通過減少箭頭的不透明度來查看究竟發生了什麼。

來源

2013-08-14 05:39:27 Yony

SVG標記不能正確定位在用作D3力佈局鏈接的d3.svg.diagonal曲線上

回答

相關問題