SVG標記不呈現

Question

任何人都可以幫助我理解如何讓標記在下面的示例中顯示在路徑上嗎？

var size = {width: 500, height: 180}, 
 
     svg = d3.select("body").append("svg").attr(size), 
 
     markers = Marker(svg, "red"); 
 

 
    var circles = svg.append("ellipse").datum({}) 
 
      .attr({ 
 
       class: "circle", 
 
       'cx': size.width/2, 
 
       'cy': size.height/2, 
 
       'ry': 50, 
 
       'rx': 100, 
 
       "fill": "steelblue" 
 
      }), 
 
     shadePath = svg.append("path") 
 
      .attr({ 
 
       class: "arrow", 
 
       d: d3.svg.line()([[100,50], [400,150]]), 
 
       stroke: "red" 
 
      }).style({ 
 
       "marker-start": markers.start, 
 
       "marker-end": markers.end 
 
      }); 
 

 
    function Marker(svg, color){ 
 
     var id = "filter-marker", defs = svg.selectAll("defs").data([id]), 
 
      idS = id + "-start", idE = id + "-end"; 
 

 
     defs.enter().append("defs"); 
 
     var markers = defs.selectAll("#"+id).data([ 
 
      { 
 
       attr: {id: idS, viewBox: "0 0 7 7", 
 
        markerWidth: "7", markerHeight: "7", 
 
        refX: "4", refY: "4",orient: "auto"}, 
 
       symbol: { 
 
        type: "rect", 
 
        attr: {x: "1", y: "1", width: "5", height: "5", style: "stroke: none; fill: " + color + ";"} 
 
       } 
 
      }, 
 
      { 
 
       attr: {id: idE, viewBox: "0 0 13 13", 
 
        markerWidth: "13", markerHeight: "13", 
 
        refX: "2", refY: "7", orient: "auto"}, 
 
       symbol: { 
 
        type: "path", 
 
        attr:{d: "M2,2 L2,13 L8,7 L2,2", style: "stroke: none; fill: " + color + ";"} 
 
       } 
 
      } 
 
     ]); 
 
     markers.enter().append("marker") 
 
      .each(function(d){ 
 
       return d3.select(this).attr(d.attr) 
 
      }); 
 
     var marker = markers.selectAll(".symbol").data(function(d){return [d.symbol]}); 
 
     marker.enter().append(function(d) { 
 
      return document.createElement(d.type) 
 
     }) 
 
      .each(function(d){ 
 
       return d3.select(this).attr(d.attr) 
 
      }); 
 

 
     return { 
 
      start: ["url(#", idS, ")"].join(""), 
 
      end: ["url(#", idE, ")"].join("") 
 
     } 
 
    };

 body{margin:0; position: relative} 
 
     svg{outline:solid 1px #ccc; 
 
      overflow: visible; 
 
     }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinycolor/1.1.2/tinycolor.min.js"></script>

如果我手動編輯在例如鉻devtools標記元件，並刪除該viewBox屬性，標記渲染。然後，如果我從代碼中刪除viewBox屬性並再次嘗試，標記仍然不會呈現。然後，如果我手動添加viewBox，標記呈現。

我試着在計時器回調中添加標記，以防計時問題但沒有變化。

渲染HTML看起來像這樣...

<svg width="500" height="180"> 
    <defs> 
     <marker id="filter-marker-start" viewBox="0 0 7 7" markerWidth="7" 
       markerHeight="7" refX="4" refY="4" 
       orient="auto"> 
      <rect x="1" y="1" width="5" height="5" 
        style="stroke: none; fill: red;"></rect> 
     </marker> 
     <marker id="filter-marker-end" viewBox="0 0 13 13" markerWidth="13" 
       markerHeight="13" refX="2" refY="7" 
       orient="auto"> 
      <path d="M2,2 L2,13 L8,7 L2,2" style="stroke: none; fill: red;"></path> 
     </marker> 
    </defs> 
    <ellipse class="circle" cx="250" cy="90" ry="50" rx="100" fill="steelblue"></ellipse> 
    <path class="arrow" d="M100,50L400,150" stroke="red" 
      style="marker-start: url(#filter-marker-start); marker-end: url(#filter-marker-end);"> 
    </path> 
</svg> 

Answer 1

不能創建使用了document.createElement SVG元素，你必須使用和與Document.createElementNS提供SVG命名空間。

我確定如果您使用Chrome的devtools檢出矩形和路徑元素，它會告訴您元素是html元素（在html命名空間中）而不是SVG元素。

我已經糾正了下面的例子：

var size = {width: 500, height: 180}, 
 
     svg = d3.select("body").append("svg").attr(size), 
 
     markers = Marker(svg, "red"); 
 

 
    var circles = svg.append("ellipse").datum({}) 
 
      .attr({ 
 
       class: "circle", 
 
       'cx': size.width/2, 
 
       'cy': size.height/2, 
 
       'ry': 50, 
 
       'rx': 100, 
 
       "fill": "steelblue" 
 
      }), 
 
     shadePath = svg.append("path") 
 
      .attr({ 
 
       class: "arrow", 
 
       d: d3.svg.line()([[100,50], [400,150]]), 
 
       stroke: "red" 
 
      }).style({ 
 
       "marker-start": markers.start, 
 
       "marker-end": markers.end 
 
      }); 
 

 
    function Marker(svg, color){ 
 
     var id = "filter-marker", defs = svg.selectAll("defs").data([id]), 
 
      idS = id + "-start", idE = id + "-end"; 
 

 
     defs.enter().append("defs"); 
 
     var markers = defs.selectAll("#"+id).data([ 
 
      { 
 
       attr: {id: idS, viewBox: "0 0 7 7", 
 
        markerWidth: "7", markerHeight: "7", 
 
        refX: "4", refY: "4",orient: "auto"}, 
 
       symbol: { 
 
        type: "rect", 
 
        attr: {x: "1", y: "1", width: "5", height: "5", style: "stroke: none; fill: " + color + ";"} 
 
       } 
 
      }, 
 
      { 
 
       attr: {id: idE, viewBox: "0 0 13 13", 
 
        markerWidth: "13", markerHeight: "13", 
 
        refX: "2", refY: "7", orient: "auto"}, 
 
       symbol: { 
 
        type: "path", 
 
        attr:{d: "M2,2 L2,13 L8,7 L2,2", style: "stroke: none; fill: " + color + ";"} 
 
       } 
 
      } 
 
     ]); 
 
     markers.enter().append("marker") 
 
      .each(function(d){ 
 
       return d3.select(this).attr(d.attr) 
 
      }); 
 
     var marker = markers.selectAll(".symbol").data(function(d){return [d.symbol]}); 
 
     marker.enter().append(function(d) { 
 
      return document.createElementNS("http://www.w3.org/2000/svg", d.type) 
 
     }) 
 
      .each(function(d){ 
 
       return d3.select(this).attr(d.attr) 
 
      }); 
 

 
     return { 
 
      start: ["url(#", idS, ")"].join(""), 
 
      end: ["url(#", idE, ")"].join("") 
 
     } 
 
    };

 body{margin:0; position: relative} 
 
     svg{outline:solid 1px #ccc; 
 
      overflow: visible; 
 
     }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinycolor/1.1.2/tinycolor.min.js"></script>