javascript - 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 中的工作方式吗？

Answer 1

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

我猜您正在使用 svg 来附加其他元素——请记住，在第一种情况下，svg 包含 SVG 元素，并且在第二个翻译后的 g 元素。因此，在第一种情况下，您附加到 svg 的任何内容都不会被翻译(因为新元素不包含在 g 元素中)。