0
我正在製作一張地圖,並且我想在它周圍添加別針。但問題是隻有最新的針腳出現。這是事情是如何繪製的(注意,我在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>
你可以提供相同的jsfiddle嗎? –