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