是否有可能與svg.marker

Question

目前我使用的標記繪製路徑之間的箭頭沿着使用d3.svg.symbol。

var def = viz.append("svg:defs") 
    .selectAll(".traffic") 
    .data(["green", "yellow", "red"]) ;// grey 

    def.enter().append("svg:marker") 
    .attr("id", String) 
    .attr("class","traffic") 
    .attr("viewBox", "0 0 8 10") 
    .append("svg:polyline") 
    .attr("points","0,0 8,5 0,10 1,5") 
    .attr("fill", String) 
    ; 

和我的道路叫標記像

viz.selectAll("path").attr("marker-mid", "url(#red)"); 

是可以使用d3.svg.symbol（）而不是標記或標記一起？

Answer 1

d3.svg.symbol()的對象是用來產生用於<path>的「d」屬性的字符串。因此，您將標記更改爲包含路徑而不是多段線，並用「d」屬性替換「點」屬性並使用符號函數計算屬性值。

唯一的其他併發症是確保符號巧妙地適合您的標記中。這些符號的大小按照默認大小爲64平方的區域來確定，我發現我必須在每一邊製作viewBox 14個單位，才能讓它們適應而不會裁剪。內的座標的碼元被設計爲在（0,0）爲中心;（默認值是3，又名三次線寬如果發現符號都太小，設置<marker>元件上的markerWidth和markerHeight屬性。）系統，所以viewBox也應該以零爲中心。

你還必須要小心的造型標記，因爲圖形繼承風格從它們所連接的線，而不是從<marker>元素。

小提琴：http://fiddle.jshell.net/5hgSa/1/

var symbolGenerator = d3.svg.symbol() 
     .type(function(d) { 
      //sample function, not sure if you wanted them all the same symbol or not! 
      var coloursToSymbols = { 
       red:"cross", 
       yellow:"square", 
       green:"diamond" 
      }; 
      return coloursToSymbols[d]; 
     }); 

var def = viz.append("svg:defs") 
    .selectAll(".traffic") 
    .data(["green", "yellow", "red"]) ; 

def.enter().append("svg:marker") 
    .attr("id", String) 
    .attr("class","traffic") 
    .attr("viewBox", "-7 -7 14 14") 
    .append("svg:path") 
    .attr("d", symbolGenerator) 
    .style("fill", String) //use style, not attribute, to override the CSS on the path 
    ;