score:0

Accepted answer

When you do this...

var series = svg5.selectAll("g")//etc...

... you are selecting <g> elements that already exist in the SVG (the two axes) and binding data to them. That's why your enter selection is empty.

You can select null (read more about it here):

var series = svg5.selectAll(null)

Or you can select by a class, that you later set in the enter selection:

var series = svg5.selectAll(".foo")

However, the best solution is just moving the axes' group to the bottom: that not only will fix your issue, but it will also paint the axis above the rectangles.

Here is your code with that change:

<html>
  <script src="https://d3js.org/d3.v5.min.js"></script>

  <body></body>


  <script type="text/javascript">
    var Margin = {
      top: 30,
      right: 20,
      bottom: 40,
      left: 110
    };
    var InnerWidth = 432 - Margin.left - Margin.right;
    var InnerHeight = 432 - Margin.top - Margin.bottom;
    var diff_variant = [{
        Missense_Mutation: 5,
        Silent: 4,
        Splice_Site: 0
      },
      {
        Missense_Mutation: 8,
        Splice_Site: 0,
        Silent: 0
      },
      {
        Splice_Site: 4,
        Missense_Mutation: 4,
        Silent: 0
      },
      {
        Missense_Mutation: 4,
        Silent: 1,
        Splice_Site: 0
      },
      {
        Missense_Mutation: 5,
        Splice_Site: 0,
        Silent: 0
      },
      {
        Missense_Mutation: 5,
        Splice_Site: 0,
        Silent: 0
      },
      {
        Missense_Mutation: 4,
        Splice_Site: 0,
        Silent: 0
      },
      {
        Missense_Mutation: 4,
        Splice_Site: 0,
        Silent: 0
      },
      {
        Silent: 1,
        Missense_Mutation: 1,
        Splice_Site: 0
      },
      {
        Missense_Mutation: 1,
        Splice_Site: 0,
        Silent: 0
      }
    ];

    var data1 = [{
        name: "Missense_Mutation",
        count: 41
      },
      {
        name: "Silent",
        count: 6
      },
      {
        name: "Splice_Site",
        count: 4
      }
    ];

    var variant_name = ["Missense_Mutation", "Splice_Site", "Silent"];

    var stack = d3.stack().keys(variant_name);

    var x = d3.scaleLinear()
      .domain([0, d3.max(data1, function(d) {
        return d.count;
      })])
      .range([0, InnerWidth]);

    var x_axis = d3.scaleLinear()
      .domain([0, d3.max(data1, function(d) {
        return d.count;
      })])
      .range([0, InnerWidth]);

    var y_axis = d3.scaleLinear()
      .domain([0, data1.length])
      .range([0, InnerWidth]);

    var y = d3.scaleBand()
      .domain(data1.map(function(d) {
        return d.name;
      }))
      .rangeRound([0, InnerHeight])
      .padding(0.1);

    var svg5 = d3.select("body").append("svg")
      .attr("preserveAspectRatio", "xMinYMin meet")
      .attr("viewBox", `0 0 ${InnerWidth + Margin.left + Margin.right} ${InnerHeight + Margin.top + Margin.bottom}`)
      .style("background", "lightblue")
      .append("g")
      .attr("transform", "translate(" + Margin.left + "," + Margin.top + ")");

    var series = svg5.selectAll("g").data(stack(diff_variant))
      .enter().append("g")
      .style("fill", (d, i) => d3.schemeSet3[i]);

    series.selectAll("rect").data(function(d) {
        return d;
      })
      .enter().append("rect")
      .attr("height", 25)
      .attr("width", function(d) {
        return x(d[1]) - x(d[0]);
      })
      .attr("x", function(d) {
        return x(d[0]);
      })
      .attr("y", function(d, i) {
        return i * 40;
      });

    svg5.append("g").style("font", "12px sans").call(d3.axisLeft(y));
    svg5.append("g").attr('transform', `translate(0, ${InnerHeight})`).style("font", "12px times").call(d3.axisBottom(x_axis));

  </script>

</html>


Related Query