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

Question

我原以为 d3.js append 函数 returns 对象附加到选择，但我发现以下两个代码块给出了不同的结果：

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 元素中）。

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

What is the difference between these two code blocks in d3.js

javascript

svg

d3.js