在没有 D3.js 的情况下在地图上加载 SVG 图像会将它们设置到错误的位置

Question

我想创建一个 map with 例如山脉。首先，我加载了轮廓，然后我想创建要在其上设置 SVG 图像的点。那没有用，因为它只是填充了点，我没有机会在不使点变大的情况下调整它的大小...

所以我的第二种方法是加载坐标 而没有 d3.js。这很有效，我能够在我想要的所有点上画出山脉。但是看看 fiddle jsfiddle.net/kwoxer/5uc17jwr/13。如您所见，并非所有山脉都位于正确的位置。

当然，我用 *xxxx 做了一些疯狂的事情，但投影没有做任何其他事情，是吗？好吧，我认为这是一个投影问题或其他问题，但对此一无所知。有人能告诉我在路径中做了什么吗？我的意思是通常你用 .attr("d",path).

加载它

我需要的只是在我的地图上显示来自 topojson 的特定点的 SVG 图像。但似乎没有人想要那个 =)

这里是 fiddle:

重要部分的一些代码片段

featureCollection = featureCollection.features;
        var svgNS = "http://www.w3.org/2000/svg";
        var xlinkNS = "http://www.w3.org/1999/xlink";
        for (var i=0; i<featureCollection.length; i++) {
            var  use = document.createElementNS(svgNS, "use");
            use.setAttributeNS(xlinkNS, "href", "#svgmounntain");
            var x = (featureCollection[i].geometry.coordinates[0])*8750;
            var y = (featureCollection[i].geometry.coordinates[1])*-7550;
            use.setAttribute("x",x);
            use.setAttribute("y", y);
            document.getElementById("markers").appendChild(use);
        }

和

var featureCollection = topojson.feature(currentMap, currentMap.objects.testarea);
    svgmap.append("g")
          .attr("id", "testarea")
          .selectAll("path")
          .data(featureCollection.features)
          .enter().append("path")
          .attr("d", path);

svgimage
        .attr("id","svgmounntain")
        .append("svg:image")
        .attr("xlink:xlink:href", "http://imgh.us/blub_1.svg" )
        .attr("width", "10")
        .attr("height", "10");

Answer 1

与此同时，我与 D3 一起工作。这是来自的代码：

svgimage.append("pattern")
        .attr("id","p1")
        .attr("width","10")
        .attr("height","10")
        .append("image")
        .attr("xlink:href", "pics/point.jpg" )
        .attr("width", 5)
        .attr("height", 5)
        .attr("x", 1)
        .attr("y", 2);

只要注意尺寸和位置。有关更多信息，请查看 link.

在没有 D3.js 的情况下在地图上加载 SVG 图像会将它们设置到错误的位置

Loading SVG images on a map without D3.js is setting them to wrong position

javascript

svg

d3.js

topojson