Question

以下是HTML网页内容的外观。

<!DOCTYPE html>
<html>
<head>
    <script src="https://d3js.org/d3.v4.min.js"></script>   
</head>
<body>
    <object type="image/svg+xml" data="Map-edited.svg"></object>
    <script src="script.js"></script>
</body>
</html>

以及script.js看起来如何。

var tooltip = d3.select("body")
    .append("div")
    .style("position", "absolute")
    .style("z-index", "10")
    .style("visibility", "hidden")
    .text("Hello");

var svg=    d3.select("object").select("svg");
svg.selectAll('g')
    .on("mouseover",function(){
        return tooltip.style("visibility","visible");
    })
    .on("mousemove",function(){
        var offset=         20;
        var topPosition=    (event.pageY-offset)+"px";
        var leftPosition=   (event.pageX+offset)+"px";
        return tooltip.style("top",topPosition).style("left",leftPosition);
    })
    .on("mouseout", function(){
        return tooltip.style("visibility","hidden");
    });

当我打开HTML页面时，我看到SVG元素中包含所有g个元素。当我将鼠标悬停在每个g元素上时，不会显示任何工具提示。但是，如果我将object替换为svg标记及其内容，则工具提示可以正常工作。如何让d3在object标签中选择一个SVG？

Answer 1

您需要访问<object> contentDocument才能访问其中包含的元素。

为此，您还需要等待<object>已加载其内容。

我对d3的关注度不是很高，所以它可能不是最好的d3方式，但至少它有效： _{（但不在StackSnippet的null原始iframe中......）}

fetch('https://upload.wikimedia.org/wikipedia/commons/f/fd/Ghostscript_Tiger.svg')
  .then(r => r.blob())
  .then(b => obj.data = URL.createObjectURL(b));

obj.onload = function() { // wait for the svg has loaded

  var tooltip = d3.select("body")
    .append("div")
    .style("position", "absolute")
    .style("z-index", "10")
    .style("visibility", "hidden")
    .text("Hello");

  var obj = this; // we're in the object's load event handler.
  var svg = d3.select(obj.contentDocument) // get the contentDocument
    .select("svg"); // then get the svg inside
  svg.selectAll('g')
    .on("mouseover", function() {
      return tooltip.style("visibility", "visible");
    })
    .on("mousemove", function() {
      var event = d3.event;
      var offset = 20;
      var topPosition = (event.pageY - offset) + "px";
      var leftPosition = (event.pageX + offset) + "px";
      return tooltip.style("top", topPosition).style("left", leftPosition);
    })
    .on("mouseout", function() {
      return tooltip.style("visibility", "hidden");
    });

};

<script src="https://d3js.org/d3.v4.min.js"></script>
<object id="obj" type="image/svg+xml"></object>

Fiddle

Answer 2

只是短暂的总结，哪些方法有效，哪些无效：

  d3.select(obj.node().contentDocument).select('svg').selectAll('g') // get the contentDocument
  console.log('node > svg > g => works!',nsvg)

  var obj1 = d3.select('#obj'); // we're in the object's load event handler.
  var ng = d3.select(obj1.node().contentDocument).selectAll('g') // get the contentDocument
  console.log('node > g => works!',ng)

  var obj2 = d3.select('#obj'); // we're in the object's load event handler.
  var svg = d3.select(obj2.contentDocument).select('svg').selectAll('g') // get the contentDocument
  console.log('select svg > g => fails!',svg)

  var obj3 = d3.select('#obj'); // we're in the object's load event handler.
  var g = d3.select(obj3.contentDocument).selectAll('g') // get the contentDocument
  console.log('select g => fails!',g)

  var getElement = document.getElementById('obj').contentDocument
  var gElements = d3.select(getElement).select('svg').selectAll('g')
  console.log("gElements > d3.select svg > g => works!", gElements);

  var svg2 = document.getElementById('obj').contentDocument.getElementsByTagName('g')
  console.log("getElementById => works!", svg2);
};

https://jsfiddle.net/hirschferkel/0wu3z1st/11/

Answer 3

我没有使用d3的经验，但这可能会有所帮助。 您需要等待直到窗口完全加载。

// object of my SVG
<object id="fridge" data={FridgePicture} ></object>

window.onload = function() {
    // Get the fridgeObject by ID
    var fridgeObj = document.getElementById("fridge");
    // Get the SVG document inside the Object tag
    var fridgeDoc = fridgeObj.contentDocument;
    // From here you can get an item you wish e.g:
    var rightDoor = fridgeDoc.getElementById("RightDoor");
};

如何在`object`标签内选择一个SVG？

3 个答案:

Fiddle