score:1

Accepted answer

You've attempted to introduce margins for the axis with this line:

.style("padding", marginRatio.top + " " + marginRatio.right +  " " + marginRatio.bottom +  " " + marginRatio.left )

This doesn't appear to play nice with firefox. Instead, do it the conventional way with an additional g element like you have commented out:

.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

Running code:

<!DOCTYPE html>
<html>

<head>
  <script data-require="d3@3.5.17" data-semver="3.5.17" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
</head>

<body>
  <div id="barrchart"></div>
  <script>
    //section 3

    function getRatio(side) {
      return ((margin[side] / width) * 100) + "%";
    }
    var margin = {
        left: 50,
        top: 10,
        right: 150,
        bottom: 30
      },
      width = 700,
      height = 210,
      // marginRatio converts margin absolute values to 
      // percent values to keep SVG responsive
      marginRatio = {
        left: getRatio("left"),
        top: getRatio("top"),
        right: getRatio("right"),
        bottom: getRatio("bottom")
      };


    var legendRectSize = 8;
    var legendSpacing = 8;

    var x0 = d3.scale.ordinal()
      .rangeRoundBands([0, width], .1);

    var x1 = d3.scale.ordinal();

    /*var y = d3.scale.linear()
        .range([height, 0]);*/


    var color = d3.scale.ordinal()
      .range(["#BF6666", "#AEA4A2", "#A5735C", "#BC957F", "#FF9F63", "#D0CC96", "#BCBC8F"]);



    /*var svg = d3.select("#barrchart").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");*/

    var svg = d3.select("div#barrchart")
      // Create div to act as SVG container
      .append("div")
      .attr("id", "svg-container")
      // Add SVG that will contain Graph elements
      .append("svg")
      // Add margin to show axes
      //.style("padding", marginRatio.top + " " + marginRatio.right +  " " + marginRatio.bottom +  " " + marginRatio.left )


    // Preserve aspect ratio xMinYmin ensures SVG fills #svg-container
    .attr("preserveAspectRatio", "xMinYMin meet")
      // Sets the viewbox, for more info on viewbox, combined with preveserveAspectRatio, this is what turns the bar chart
      // into a responsive bar chart
      .attr("viewBox", "0 0 " + (width + margin.left + margin.right) + " " + (height + margin.top + margin.bottom))
      // Id to target with CSS
      .attr("id", "svg-content-responsive")
      .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    dataset = [{
      label: "Pending",
      "a": 20,
      "b": 10,
      "c": 50
    }, {
      label: "InProgress",
      "a": 15,
      "b": 30,
      "c": 40
    }, {
      label: "Finished",
      "a": 20,
      "b": 25,
      "c": 20
    }, {
      label: "Deliver",
      "a": 10,
      "b": 35,
      "c": 40
    }];


    var options = d3.keys(dataset[0]).filter(function(key) {
      return key !== "label";
    });

    dataset.forEach(function(d) {
      d.valores = options.map(function(name) {
        return {
          name: name,
          value: +d[name]
        };
      });
    });
    var xAxis = d3.svg.axis()
      .scale(x0)
      .orient("bottom");


    var divTooltip = d3.select("#barrchart").append("div").attr("class", "toolTip");

    var y = d3.scale.linear()
      // Instead of using the whole array for the input domain, we use 0, since we 
      // want our y axis to start at 0, and the biggest value of our dataset
      // d3.max returns the largest value of an array
      //.domain([d3.max(function(d) { return d.valores; }), 0])
      // .domain([ d3.max(dataset, function(d) { return d3.max(d.valores, function(d) { return d.value; }); }),0])

    .range([height, 0]);

    var yAxis = d3.svg.axis()
      .scale(y)
      .orient("left")

    .tickFormat(d3.format(".2s"));


    x0.domain(dataset.map(function(d) {
      return d.label;
    }));
    x1.domain(options).rangeRoundBands([0, x0.rangeBand()]);
    y.domain([0, d3.max(dataset, function(d) {
      return d3.max(d.valores, function(d) {
        return d.value;
      });
    })]);

    svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

    svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
      .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".91em")
      .style("text-anchor", "end")
      .text("Counts");

    var bar = svg.selectAll(".bar")
      .data(dataset)
      .enter().append("g")
      .attr("class", "rect")
      .attr("transform", function(d) {
        return "translate(" + x0(d.label) + ",0)";
      });

    bar.selectAll("rect")
      .data(function(d) {
        return d.valores;
      })
      .enter().append("rect")
      .attr("width", x1.rangeBand())
      .attr("x", function(d) {
        return x1(d.name);
      })
      .attr("y", function(d) {
        return y(d.value);
      })
      .attr("value", function(d) {
        return d.name;
      })
      .attr("height", function(d) {
        return height - y(d.value);
      })
      .style("fill", function(d) {
        return color(d.name);
      });

    bar
      .on("mousemove", function(d) {
        divTooltip.style("left", d3.event.pageX + 10 + "px");
        divTooltip.style("top", d3.event.pageY - 25 + "px");
        divTooltip.style("display", "inline-block");
        var x = d3.event.pageX,
          y = d3.event.pageY
        var elements = document.querySelectorAll(':hover');
        l = elements.length
        l = l - 1
        elementData = elements[l].__data__
          //divTooltip.html((d.label)+"<br>"+elementData.name+"<br>"+elementData.value+"");
        divTooltip.html("Type:" + elementData.name + "</br>" + "Cout:" + elementData.value)
      });
    bar
      .on("mouseout", function(d) {
        divTooltip.style("display", "none");
      });

    var legendOffset = width + 20;
    var legend = svg.selectAll('.legend')
      .data(color.domain())
      .enter()
      .append('g')
      .attr('class', 'legend')
      .attr('transform', function(d, i) {
        var height = legendRectSize + legendSpacing;
        var offset = height * color.domain().length / 2;
        var horz = legendOffset;
        var vert = i * height + 50;
        return 'translate(' + horz + ',' + vert + ')';
      });
    legend.append('rect')
      .attr('width', legendRectSize)
      .attr('height', legendRectSize)
      .style('fill', color)
      .style('stroke', color);

    legend.append('text')
      .attr('x', legendRectSize + legendSpacing)
      .attr('y', legendRectSize)
      .text(function(d) {
        return d
      });
  </script>
</body>

</html>


Related Query

More Query from same tag