这两个d3.js代码块有什么区别？

Question

我曾认为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中是如何工作的，我有什么不理解的地方？

- xnx

---

两者应该给出相同的结果。您能否提供一个完整的示例，以演示问题？ - Lars Kotthoff

嗯，刚试了这两个片段。它们产生完全相同的结果。<svg width="100" height="100"><g class="graph" transform="translate(30,30)"></g></svg>和<svg width="100" height="100"><g class="graph" transform="translate(30,30)"></g></svg>。 - Mark

我猜你正在使用 svg 来添加额外的元素 - 请记住，在第一种情况下，svg 包含 SVG 元素，在第二种情况下包含已转换的 g 元素。因此，在第一种情况下，你附加到 svg 的任何内容都不会被转换（因为它不包含在 g 元素中）。 - Lars Kotthoff

@Lars Kotthoff：啊哈！我想我明白了。看起来svg是一个不好的变量名选择。如果有帮助的话，也许你可以把你的评论转化成一个答案，这样我就可以接受了？ - xnx

Answer 1

两个代码块应该得到完全相同的结果。

我猜你是使用svg来添加额外的元素——请记住，在第一个例子中，svg包含SVG元素，在第二个例子中则包含了已翻译的g元素。所以在第一个例子中，任何你添加到svg中的东西都不会被翻译（因为新元素并没有包含在g元素中）。

- Lars Kotthoff