Javascript d3.js中这两个代码块之间的区别是什么

我原以为d3.js

append

函数返回附加到选择的对象，但我发现以下两个代码块给出了不同的结果：

var svg = d3.select("body")
    .append("svg")
        .attr("width", fig_width)
        .attr("height", fig_height);

    svg.append("g")
        .attr("class", "graph")
        .attr("transform", 
              "translate(" + graph_margin.left + "," + graph_margin.top + ")");

这似乎不会转换图形组，将其偏移左上边距，并且：

var svg = d3.select("body")
    .append("svg")
        .attr("width", fig_width)
        .attr("height", fig_height)
    .append("g")
        .attr("class", "graph")
        .attr("transform", 
              "translate(" + graph_margin.left + "," + graph_margin.top + ")");

是的

---

关于SVG/d3.js中的工作方式，我还不了解什么？

两个代码块应该给出完全相同的结果

---

我猜您使用的是

svg

来附加额外的元素——请记住，在第一种情况下，

svg

保存svg元素，在第二种情况下保存翻译后的

g

元素。因此，在第一种情况下，您附加到

svg

的任何内容都不会被翻译（因为新元素不包含在

g

元素中）。

两者都应该给出相同的结果。你能发布一个完整的例子来说明这个问题吗？嗯，刚刚试过。它们产生了完全相同的结果

和

我猜您正在使用

svg

向添加其他元素--请记住，在第一种情况下，

svg

保存svg元素，在第二种情况下保存翻译后的

g

元素。因此，在第一种情况下附加到

svg

的任何内容都不会被翻译（因为它不包含在

g

元素中）。@Lars Kotthoff:Aha！那我想我知道了。看来

svg

是一个糟糕的变量名选择。如果这对其他人有帮助，也许你可以把你的评论变成我可以接受的答案？