CODEWITHSUNDEEP
javascriptd3.js
dchen71
dchen71

Reputation: 170

How do I plot multiple rectangles on the same plot in d3

I am trying to create multiple rectangles on a single plot using data from a csv file. With my current approach, I am appear to be creating multiple plots per each row of data. I suspect that my problem has something to do with how I select and append my svg element in regards to my data.

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)
});

Upvotes: 0

Views: 1333

Answers (1)

Mauricio Poppe
Mauricio Poppe

Reputation: 4876

Read thinking with joins, what you're doing is creating multiple svg nodes instead of a single svg with multiple rects

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)
});

Upvotes: 2

Related Questions