一张svg中的多个d3图

Question

i've found tons of answers about multiple graphs on the same page, but i already have that.

what i want to add now is a second set of bars inside the same graph (the graph shows a percentage for every day, and i want to add a time component too.) so: both graphs in the same svg, overlapping each other, to see the comparison.

it currently looks like this

how can i insert a second graph over/besides that? i didn't find any resources on that

Answer 1

If I understand your question correctly, the intention is to draw 'level1', 'level2', 'level3' bars in the same chart container.

There are possibly two approaches:

One is to rearrange your source data, so that you can draw a group bar chart .

The other is to append "rect" in the same svg container based on same x axis, sth like this . There are 2 sets of bars on the same chart:

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