Question

我是D3.js的新用户，所以我想知道如何使用d3.select()或d3.selectAll()从我加载的外部SVG中选择一些id。例如：我想选择一些国家并改变它们的颜色和边框，但不能使它在D3.js中起作用。相关脚本：

        var svg = d3.select("body").append("svg")
            .attr("width", 2048)
            .attr("height", 982)
            .style("fill", "transparent");
        var g = svg.append("g");

        var img = g.append("svg:image")
            .attr("xlink:href", "http://upload.wikimedia.org/wikipedia/commons/b/b3/Blank_map_of_Europe.svg")
            .attr("width", 2048)
            .attr("height", 982)
            .attr("x", 0)
            .attr("y", 0);


        var hr = d3.selectAll("#g").select("#hr").style("fill","green");

Answer 1

如果您要将数据加载到<image>标记中，则无法操纵该图像的内容。

如果您希望代码能够正常工作，则需要将数据内联加载到文档中，并且需要将文件与加载文件放在同一个域中。即从http://upload.wikimedia.org/wikipedia/commons/b/b3/Blank_map_of_Europe.svg加载文件只有在加载它的代码也在http://upload.wikimedia.org/上时才会起作用

假设您将地图复制到与加载页面相同的位置，那么您可以使用XMLParser来解析它，然后使用importNode和appendChild将其附加到现有文档中。一旦地图和加载它的代码都是同一文档的一部分，选择代码就可以正常工作。

从d3.js中的svg中选择id

1 个答案: