Grafik d3

Question

Burada numunede zorla yönettiği grafiği kullanıyorum

Tanıtımı Ok (yönlendirilmiş), Kuvvet Directed içinde - http://bl.ocks.org/mbostock/4062045

Ama verilerim yöneltilmekte olduğundan, ben grafikte bağlantıları ihtiyaç olarak temsil edilecek ok bağlantıları. Belki de http://bl.ocks.org/d3noob/5141278 gibi.

birisi ben D3 için yeni http://bl.ocks.org/mbostock/4062045

gibi bir yönlendirilmiş grafik oluşturmak değişiklikler veya eklemeler önermek misiniz, ben bir çözüm, belki onun önemsiz bulamadık, ama küçük bir yardım takdir edilmektedir.

Answer 1

Bu iki örneği birleştirmek basittir ve ben bir JSFiddle to demo oluşturdum. Birincisi, SVG ok stili tanımını ekleyin:

// build the arrow. 
svg.append("svg:defs").selectAll("marker") 
    .data(["end"])  // Different link/path types can be defined here 
    .enter().append("svg:marker") // This section adds in the arrows 
    .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", "M0,-5L10,0L0,5"); 

Sonra sadece Böyle bir şey ile bitirmek senin links

.attr("marker-end", "url(#end)"); 

işaret eklemek:

Bazı okların diğerlerinden daha büyük olduğunu göreceksiniz, çünkü tüm bağlantılar aynı değil stroke-width. Tüm okları aynı boyutta olmak için bağlantıları eklerken, sadece

.style("stroke-width", function(d) { return Math.sqrt(d.value); }) 

değiştirin.