9

我正在以这种方式导入一个 svg（作为来自服务器的静态内容）

d3.xml("http://localhost:3000/mysvg.svg", "image/svg+xml", function(xml) {
    var importedNode = document.importNode(xml.documentElement, true);
    var mySvg = d3.select("#somediv").node().appendChild(importedNode);

然后我试图遍历所有 svg 路径并用它们做一些事情

    d3.selectAll("#somediv svg path").each(function(d, i) {
        console.log(this, d, i);
    });
}

我得到的是这个问题

  • i是从1到路径数，这是正确的。

  • d不是undefined正确的 svg 路径元素。

  • this是 svg 路径元素，比如这个

    <path id="m021" fill="#00AAFF" d="M225.438,312.609c-0.665-1.084-1.062-1.691-2.368-1.963c-0.582-0.121-1.686-0.271-2.265-0.069 c-0.507,0.174-0.637,0.649-1.431,0.368c-0.934-0.33-0.665-1.272-0.71-2.104c-0.597-0.021-1.18,0-1.733,0.262 ...etc" ></path>

我期望d成为真正的 svg 路径，为什么不是？

编辑：

对我想做的事情有一点了解可能会有所帮助。

我有一个 svg，我镇的每个区都有一条路径。我想在每条路径的中心制作一些饼图。我现在没有数据，它将用于饼图。我想在路径上创建一个鼠标悬停功能，并在每条路径上添加一个小红圈（在以后的步骤中将成为饼图）。

做这个的最好方式是什么？

4

2 回答 2

7

简化您的原始请求，假设您要在每个区域的中心添加一个圆圈。让我们假设这些地区是相对方形的。请注意，如果您有地理数据而不是路径，这会更简单。

var svg = d3.select("#somediv svg");
var districts = svg.selectAll("path");

var district_centers = districts[0].map(function(d, i) {
    var bbox = this.getBBox();
    return [bbox.left + bbox.width/2, bbox.top + bbox.height/2];
});

svg
  .selectAll("circle")
  .data(district_centers)
  .enter()
  .append("circle")
     .attr("class", "district_circle")
     .attr("cx", function(d){ return d[0]})
     .attr("cy", function(d){ return d[1]})
     .attr("r", 10)
     .attr("fill", "red");
于 2013-03-07T18:08:55.657 回答
3

根据selection.each 的 API 文档，d 应该是数据，如果您之前没有调用 .data() 将数据绑定到节点，您将不会拥有该数据。您所拥有的只是没有数据绑定的纯 SVG。

我注意到你的路径确实有 ID，所以如果你有一个与这些 ID 匹配的数据集，你可以使用.data 函数的 keys 参数绑定到它

于 2013-03-07T18:04:01.160 回答