Question

我正在制作一张地图，我想在它周围添加别针。但问题是只显示最新的引脚。这是事情的绘制方式（注意我在ExtJS框架中这样做）：

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);

            }
        });
});

}

现在据我所知，这可能是由于console.log(pinNode);输出<g id="miu" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1">导致的某种ID冲突。但事情就是这样 - 我不知道id值来自哪里，因为我删除了pin 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>

Answer 1

问题在于我的浏览器缓存，因为它正在加载旧版本的svg。

d3不能多次使用相同的svg

1 个答案: