d3不能多次使用相同的svg

我正在製作一張地圖，並且我想在它周圍添加別針。但問題是隻有最新的針腳出現。這是事情是如何繪製的（注意，我在ExtJS的框架，這樣做）：d3不能多次使用相同的svg

drawMap : function() { 
var regions = this.getView().getColorRegions(); 
var pins = this.getView().getPins(); 
var width = this.getView().getWidth(); 
var height = this.getView().getHeight(); 
    var container = this.lookupReference('map'); 
    var map = this.codeToLayerMap; 
    var svg = d3.select("#" + container.getId().toString()) 
     .append("svg") 
     .attr("width", width) 
     .attr("height", height) 
     .attr("preserveAspectRatio", "xMinYMin meet") 
    .attr("viewBox", "0 0 800 600") 
    .classed("svg-content", true); 

    d3.xml("/Dashboards/resources/LietuvosPlikasZemNoStyle.svg", 
    function(error, documentFragment) { 
    if (error) {console.log(error); return;} 
     var svgNode = documentFragment 
       .getElementsByTagName("svg")[0]; 
     svg.node().appendChild(svgNode); 
     svg.select("svg").attr("width", width).attr("height", height).attr("viewBox", "0 0 2700 1675"); 
     console.log(svg.selectAll("svg")); 
     for (var i = 0; i < regions.length; i++) { 
      var r = regions[i]; 
      svg.select('#'+codeToIdMap[r.code]).attr('style', 'fill: '+ r.color +';'); 
     } 

     d3.xml("/Dashboards/resources/mapmarker-pin.svg", function(error2, pinDocumentFragment){ 
      if (error2) {console.log(error2); return;} 
      var pinNode = pinDocumentFragment.getElementsByTagName("svg")[0].getElementsByTagName("g")[0]; 
      console.log(pinNode); 
      for (var i = 0; i < pins.length; i++) { 
       var pin = pins[i]; 
       var x, y; 
       if (pin.code) { 
        var bbox = svg.select('#'+codeToIdMap[pin.code]).node().getBoundingClientRect(); 
        console.log(svg.select('#'+codeToIdMap[pin.code]).node()); 
        x = bbox.x; 
        y = bbox.y; 
       } else { 
        x = pin.x; 
        y = pin.y; 
       } 
       svg.append("svg") 
        .attr("x", x) 
        .attr("y", y) 
        .attr("id", "mapmarker-" + i) 
       .classed("mapmarker", true) 
       .node().appendChild(pinNode); 

      } 
     }); 
}); 

}

現在據我瞭解，這可能是由於某種ID的衝突，作爲console.log(pinNode);輸出<g id="miu" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1">。但這裏的東西雖然 - 我不知道在哪裏值ID是從哪裏來的，我在銷SVG文件中刪除所有的ID屬性：在我的瀏覽器的緩存

<?xml version="1.0" ?><svg height="24px" version="1.1" viewBox="0 0 24 24" width="24px" xmlns="http://www.w3.org/2000/svg" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" xmlns:xlink="http://www.w3.org/1999/xlink"><title/><desc/><defs/><g fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g transform="translate(-471.000000, -443.000000)"><g transform="translate(215.000000, 119.000000)"/><path d="M479.5,466 C479.5,466 487,456.127718 487,451.812818 C487,447.497918 484.518799,443.999999 479.5,444 C474.481201,444.000001 472,447.497918 472,451.812818 C472,456.127718 479.5,466 479.5,466 L479.5,466 Z M479.5,454.5 C481.709139,454.5 483.5,452.709139 483.5,450.5 C483.5,448.290861 481.709139,446.5 479.5,446.5 C477.290861,446.5 475.5,448.290861 475.5,450.5 C475.5,452.709139 477.290861,454.5 479.5,454.5 L479.5,454.5 Z" fill="#000000" /></g></g></svg>

來源

2016-08-25 Coderino Javarino

你可以提供相同的jsfiddle嗎？ –

問題撒謊，因爲它是裝載舊版本的svg。

來源

2016-08-27 08:28:34

d3不能多次使用相同的svg

回答

相關問題