javascript - 使用 d3 javascript 库附加 DOM/SVG 元素会更改变量引用/范围，为什么？

Question

我注意到，当我将 DOM/SVG 元素内联附加到现有对象时，以及在使用 D3 javascript 库的单独步骤中时，我会得到混合结果。如果我查看引用原始 SVG 对象的变量，当在创建原始对象期间附加另一个对象时，它会发生变化。这是一个例子:

var body = d3.select("body");

var svg = body.append("svg")
    .attr("width", '100%')
    .attr("height", '100%')

var html1 = svg.append("foreignObject")
    .attr("x", 50)
    .attr("y", 25)
    .attr("width", 200)
    .attr("height", 100)
    .attr('id', 'fo1')
    .append("xhtml:div")
    .html("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu enim quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu enim quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu enim quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu enim quam.");

var html2 = svg.append("foreignObject")
    .attr("x", 250)
    .attr("y", 25)
    .attr("width", 200)
    .attr("height", 100)
    .attr('id', 'fo2');

html2.append("xhtml:div")
    .html("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu enim quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu enim quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu enim quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu enim quam.");

console.log('first fo:', html1[0]);
console.log('first fo id:', d3.select('#fo1')[0]);
console.log('second fo:', html2[0]);

输出如下:

first fo: 
   Array[1]
        0: div
        length: 1
        parentNode: html
        __proto__: Array[0]

first fo id: 
  Array[1]
       0: foreignobject#fo1.[object SVGAnimatedString]
       length: 1
       parentNode: html
       __proto__: Array[0]


second fo: 
  Array[1]
     0: foreignobject#fo2.[object SVGAnimatedString]
     length: 1
     parentNode: html
     __proto__: Array[0]

在创建过程中将 DIV 元素内联附加到foreignObject 元素后，变量从 foreignObject 更改为 div。在额外步骤中执行此操作不会改变引用。这是corresponding jsfiddle有人可以向我解释一下这一点并告诉我如何避免它吗？

Answer 1

D3 中 append() 操作的结果是您刚刚附加的元素。这样您就可以链接方法来设置属性、内容等。如果不是这种情况，那么您就无法使用 .html() 函数来设置您的新附加的 div 因为当前对象仍然是父 foreignObject。

此行为是故意的，除非修改 D3 源，否则无法阻止它。如果您需要保存对所有元素的引用，只需附加到单独的调用中即可。那就是

var html1 = svg.append("foreignObject")
    ...
    .attr('id', 'fo1')
    .append("xhtml:div")
    .html(...);

会变成

var html1 = svg.append("foreignObject")
    ...
    .attr('id', 'fo1');

var nested = html1.append("xhtml:div")
    .html(...);