Qual è la differenza tra questi due blocchi di codice in d3.js

Question

Avevo pensato che le d3.js append funzione restituisce l'oggetto aggiunto ad una selezione, ma trovo i seguenti due blocchi di codice dare risultati diversi:

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

che non sembra di tradurre il gruppo di diagrammi, compensando esso con un margine sinistro e superiore e:

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

che fa.

Cosa non capisco del modo in cui funziona in SVG/d3.js?

Answer 1

Entrambi i blocchi di codice devono fornire esattamente lo stesso risultato.

Suppongo che si stia utilizzando svg per aggiungere elementi aggiuntivi a: tenere presente che nel primo caso, svg contiene l'elemento SVG e nel secondo l'elemento g tradotto. Quindi tutto ciò che si aggiunge a svg nel primo caso non verrebbe tradotto (poiché i nuovi elementi non sono contenuti nell'elemento g).