Question

Going through D3.js tutorials, I see two different conventions, and I am not sure what the difference is because they both product the same code:

1)

var chart = d3.select("body")
              .append("svg:svg")  
              .attr("class", "chart")
              .attr("width", w * data.length - 1)
              .attr("height", h);

    chart.selectAll("rect")
        .data(data)
        .enter().append("svg:rect")

2)

var chart = d3.select("body")
              .append("svg")  
              .attr("class", "chart")
              .attr("width", w * data.length - 1)
              .attr("height", h);

    chart.selectAll("rect")
        .data(data)
        .enter().append("rect")

Can someone explain the difference between append(“svg”) and append(“svg:svg”) and why I would use one or the other?

Answer 1

The svg: part specifies the name space for the element that comes after it, i.e. an svg element in the svg namespace. It was advisable to specify this in older versions of d3 as it might be interpreted incorrectly otherwise, but it is not necessary to do so in recent versions.