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

回答

相关问题