Question

我试图将外部SVG加载到D3中，然后能够使用D3功能进行选择和操作。我能够使用以下代码将其加载到页面上：

  d3.xml("external.svg").mimeType("image/svg+xml").get(function(error, xml) {
    if (error) throw error;
    document.body.appendChild(xml.documentElement);                        
  })

但是，当我尝试使用d3.select时，没有一个函数可以工作。当我在console.log中选择所选元素时，它会显示一个空数组。

Answer 1

根据您提供的plunkr，为了让您的活动正常运行，您需要在d3加载svg后添加它们。所以，而不是：

d3.xml("DCMetroMap.svg").mimeType("image/svg+xml").get(function(error, xml) {
    if (error) throw error;
    document.body.appendChild(xml.documentElement);
  })

  // this runs before the above finishes, so d3 won't find something to select
  d3.select("#K05")
    .on("mouseover", function(d) {
      console.log(d)
      console.log('hello')
    })

   console.log(d3.select("#K05"))

你需要像这样移动选择：

  d3.xml("DCMetroMap.svg").mimeType("image/svg+xml").get(function(error, xml) {
    if (error) throw error;
    // load the document 
    document.body.appendChild(xml.documentElement);

    //then add the events
    d3.select("#K05")
    .on("mouseover", function(d) {
      console.log(d) // d will be null here
      console.log('hello')
      alert("Hi!")

    })

  })

像这样：http://plnkr.co/edit/WbYyBKtzZe6MtKGbjzw9?p=preview

换句话说，无论你做什么，都必须把它放在document.body.appendChild(xml.documentElement);

之后

希望这有帮助！祝你好运！

我无法选择外部装入D3的SVG元素

1 个答案: