d3の同じプロットに複数の矩形をプロットするには

Question

csvファイルのデータを使用して、1つのプロットに複数の矩形を作成しようとしています。私の現在のアプローチでは、データの各行ごとに複数のプロットを作成するように見えます。私の問題は、自分のデータに関して私のsvg要素をどのように選択して追加するかと関係があると思われます。

d3.csv('Input/test_single.csv') 
    .row(function (d) { return d }) 
    .get(function (error, rows) { 
    var chart = d3.select("#chart-div").data(rows).enter().append("svg").classed("chart", true).attr("width", width); 

    chart.append("rect") 
     .attr("x", function(d){return(parseInt(d.Start) + parseInt(spacer))}) 
     .attr("y", 75) 
     .attr("width", function(d){return(parseInt(d.End) - parseInt(d.Start))}) 
     .attr("height", 50) 
     .style("stroke", "rgb(255,0,0)") 
     .style("stroke-width", 2) 
}); 

Answer 1

読むthinking with joins、あなたが複数作成されてやっているsvgノードの代わりに、複数のrectsを持つ単一のsvg

d3.csv('Input/test_single.csv') 
    .row(function (d) { return d }) 
    .get(function (error, rows) { 
    var chart = d3.select("#chart-div").append('svg').classed("chart", true).attr("width", width) 

    chart.selectAll('rect').data(rows) 
     .enter() 
     .append("rect") 
     .attr("x", function(d){return(parseInt(d.Start) + parseInt(spacer))}) 
     .attr("y", 75) 
     .attr("width", function(d){return(parseInt(d.End) - parseInt(d.Start))}) 
     .attr("height", 50) 
     .style("stroke", "rgb(255,0,0)") 
     .style("stroke-width", 2) 
});