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 1}}元素。因此，您在第一种情况下附加到g的任何内容都不会被翻译（因为新元素未包含在{{1}}元素中）。

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

1 个答案: