正好像这样(https://bl.ocks.org/mbostock/2206590)但是调用来自Inkscape的外部.svg文件中的数据。
到目前为止,这是我的代码(使用Laravel):
<script>
// Extract the width and height that was computed by CSS.
var chartDiv = document.getElementById("vis");
var width = chartDiv.clientWidth;
var height = chartDiv.clientHeight;
// load the external svg from a file
d3.xml("{{ asset('assets/groundfloor.svg') }}", "image/svg+xml", function(xml) {
var importedNode = document.importNode(xml.documentElement, true);
d3.select("div#vis")
.each(function() {
this.appendChild(importedNode);
})
// inside of our d3.xml callback, call another function
// that styles individual paths inside of our imported svg
styleImportedSVG(); //calling the zoom feature from a function (it can be called here too)
});
是的,我已经在网络上的任何地方查找过去几天浏览多个块,并且还没有人在外部.svg文件上进行示例以及如何将元素附加到其中并将其分配给对象。
编辑:要清楚,我想知道.data(importedNode.feature(us, us.objects.buildings).features)
的外部.svg文件变体,如果这是我需要更改以便将我的svg文件中的元素绑定到d3函数的对象。