一个svg中的多个d3图

Question

我在同一页面上找到了大量关于多个图表的答案，但我已经有了。

我现在想要添加的是同一图表中的第二组条形图 （图表显示了每天的百分比，我也想添加一个时间组件。） 所以：两个图形在同一个svg中，相互重叠，以便进行比较。

目前看起来像这样

如何在其上插入第二张图？ 我没有找到任何资源

Answer 1

如果我正确理解您的问题，目的是绘制级别1＆＃39;，＆＃39;级别2＆＃39;，＆＃39;级别3＆＃39;同一图表容器中的条形图。

可能有两种方法：

一种是重新排列源数据，以便绘制group bar chart。

另一种是追加＆＃34; rect＆＃34;在基于相同x轴的同一svg容器中，像this一样。同一张图表上有两组条形图：

var svg = d3.select(".main").append("svg")
  .attr({
    "width": "800",
    "height": "600"
  })

  var xScale = d3.scale.ordinal()
  .domain(["a","b","c"])
  .rangeRoundBands([0,600], .5)

  var yScale = d3.scale.linear()
  .domain([25, 80])
  .range([600,0])


  var data1 = [
    {type: "a", value: 30},
    {type: "b", value: 40},
    {type: "c", value: 50},
    ];

  var data2 = [
    {type: "a", value: 35},
    {type: "b", value: 48},
    {type: "c", value: 60},
    ];

    var rect_type1 =svg.selectAll(".rect1")
    .data(data2)

    rect_type1.enter().append("rect")
    .attr({
      "x": function(d){return xScale(d.type)},
      "y": function(d){return yScale(d.value)},
      "width": xScale.rangeBand(),
      "height": function(d){return 600 - yScale(d.value)},
    })
    .attr("fill", "teal")
    //.attr("fill-opacity", "0.5")
    .attr("class", "rect1")

    var rect_type2 =svg.selectAll(".rect2")
    .data(data1)

    rect_type2.enter().append("rect")
    .attr({
      "x": function(d){return xScale(d.type)},
      "y": function(d){return yScale(d.value)},
      "width": xScale.rangeBand(),
      "height": function(d){return 600 - yScale(d.value)},
    })
    .attr("fill", "pink")
    .attr("fill-opacity", "0.5")
    .attr("class", "rect2")