d3导入外部.SVG文件并将它们绑定到函数对象

时间:2017-09-20 09:17:28

标签: javascript d3.js svg

正好像这样(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函数的对象。

0 个答案:

没有答案