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

Question

I had thought that the d3.js append function returns the object appended to a selection, but I find the following two code blocks give different results:

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 + ")");

Which does not seem to translate the graph group, offsetting it by a left and top margin and:

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 + ")");

which does.

What don't I understand about the way this works in SVG / d3.js?

Answer 1

Both code blocks should give exactly the same result.

I'm guessing that you're using svg to append additional elements to -- keep in mind that in the first case, svg holds the SVG element and in the second the translated g element. So anything you append to svg in the first case wouldn't be translated (because the new elements are not contained in the g element).