如何在 d3 的同一个图上绘制多个矩形答案

【问题标题】：How do I plot multiple rectangles on the same plot in d3如何在 d3 的同一个图上绘制多个矩形
【发布时间】：2016-04-28 10:40:50
【问题描述】：

我正在尝试使用 csv 文件中的数据在单个图上创建多个矩形。使用我目前的方法，我似乎在为每行数据创建多个图。我怀疑我的问题与我如何选择和附加关于我的数据的 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)
});

【问题讨论】：

标签： javascript d3.js

【解决方案1】：

阅读thinking with joins，您正在做的是创建多个svg 节点而不是具有多个矩形的单个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)
});

【讨论】：