Question

我希望创建地图，例如的山即可。首先，我加载了轮廓，然后我想创建我想要设置SVG图像的点。这不起作用，因为它只是填补了点，我没有机会调整它的大小而不会使点更大...

所以我的第二种方法是加载坐标而不用d3.js 。这很好用，我能够在我想要的所有点上画山。但看看那个小提琴 jsfiddle.net/kwoxer/5uc17jwr/13 。正如你所看到的，它并不适合所有山脉。

当然我用* xxxx做了一些疯狂的事情，但投影不做其他任何事情，或者做到了吗？嗯，我认为这是一个预测问题，或者其他什么，但实际上没有任何线索。有人能告诉我在路径上做了什么。我的意思是你通常用 .attr（＆＃34; d＆＃34;，路径）加载它。

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

这里有一些来自小提琴重要部分的代码片段：

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 来实现。这是来自Draw SVG image on paths but as big as needed

的代码
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);

只需照顾尺寸和大小。有关更多信息，请查看该链接。

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

1 个答案: