javascript - D3 での SVG 要素の追加

Question

D3.js のチュートリアルを進めていくと、2 つの異なる規則が見られますが、どちらも同じコードを生成するため、違いが何であるかはわかりません。

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

append("svg") と append("svg:svg") の違いと、どちらか一方を使用する理由を誰かが説明できますか?

Answer 1

このsvg:部分は、その後に続く要素、つまり名前空間内の要素の名前空間を指定しsvgますsvg。正しく解釈されない可能性があるため、古いバージョンの d3 ではこれを指定することをお勧めしますが、最近のバージョンでは指定する必要はありません。