D3js页面：如何用独立的svg文件替换topojson生成的svg？答案

【问题标题】：D3js page: how to replace topojson generated svg by stand alone svg file?D3js页面：如何用独立的svg文件替换topojson生成的svg？
【发布时间】：2014-04-06 05:56:14
【问题描述】：

给定a D3js script，具有与我想要的非常相似的交互功能，使用 topojson 生成其 SVG。

鉴于我自己没有 topojson，而是一个 SVG 文件，我希望在该文件上重复使用相同的交互功能。

我应该如何处理以便我的 D3js 代码加载我的 SVG 文件而不是从 topojson 生成一个？

我当然会提供一个经过严格编码的 SVG 文件，带有合适的 ID 和语法。

想法：我想我应该替换

d3.json("/mbostock/raw/4090846/us.json", function(error, us) { 
  // further SVG generator code here
});

它通过加载和放置我的 SVG 文件的东西生成 SVG 代码，但是如何处理？使用什么代码？

【问题讨论】：

d3 对您提供的数据非常非常挑剔。您可能需要查看外部库以将其他文件的格式更改为它喜欢的格式。
我当然会提供一个严格编码的 SVG 文件，带有合适的 id 和语法。

标签： svg d3.js topojson

【解决方案1】：

您可以直接在 HTML 中包含 SVG 文件，无需在 Javascript 中加载它。例如：

<object id="mySVG" data="my.svg" type="image/svg+xml"></object>

唯一要记住的是，您最终会在文档中使用两个 DOM（主 HTML 一个和嵌入的 SVG 一个），并且 CSS 选择器不会跨越 DOM 边界。也就是说，d3.select("#IDinSVG") 可能不起作用，但像 d3.select(d3.select("#mySVG").node().getDocumentElement()).select("#IDinSVG") 这样的东西应该。

【讨论】：

这种方法怎么样：stackoverflow.com/a/20254203/1974961d3.xml("img/mysvg.svg", function(xml) { document.body.appendChild(xml.documentElement); }); 可以让 CSS 选择器更直接。