在D3.js中导入并解析SVG文件 [英] Import and parse SVG file in D3.js

问题描述

我有其他地方（使用MS Visio）创建的SVG文件，我想用作可视化的背景，其中某些定位是由SVG图形中的项目的位置驱动的。理想情况下，我可以直接操作导入的SVG数据，然后使用D3在调用文档中创建元素。

I have SVG files created elsewhere (using MS Visio) which I would like to use as background for a visualization, where some positioning is driven by the placement of items in the SVG graphic. Ideally, I would be able to manipulate the imported SVG data directly, and then use it to create elements in the calling document using D3.

有一个简单的导入方法使用D3将现有的SVG文档转换为数据结构，类似于可以导入JSON的方式？我试过d3.xml，但似乎没有得到一个有用的数据结构。使用IMG标记导入图形不会使用SVG元素填充DOM，只要我能看到。

Is there a simple way to import an existing SVG document into a data structure using D3, similarly to the way that JSON can be imported? I've tried d3.xml, but don't seem to get a useful data structure. Importing the graphic with an IMG tag doesn't populate the DOM with SVG elements as far as I can see.

一个小的复杂性：它也必须在IE9工作！ （ImportNode不工作）

One small complication: it must also work in IE9! (ImportNode doesn't work)

推荐答案

感谢您的想法。我发现了到底做什么。可以使用d3.xml调用导入SVG文件。解析完成，但复杂性是如何理解生成的DOM结构。 IE9似乎有一个问题，放置导入的节点，但我不需要那种行为，因为我只想使用方面的传入SVG，并将使用D3重新生成SVG

Thanks for the ideas. I found out what to do in the end. It is possible to import the SVG file using a d3.xml call. The parsing is done, but the complication is how to understand the DOM structure which is produced. IE9 seems to have a problem with placing the imported node, but I don't need that behaviour as I only want to use aspects of the incoming SVG, and will be regenerating SVG using D3

这篇关于在D3.js中导入并解析SVG文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！