D3 Y 轴刻度不可见

Question

我创建了 d3 响应式条形图。它在 chrome 中运行良好，但是当我在 Mozilla 浏览器上渲染相同的图表时，y 轴刻度不可见。我无法理解他为什么会这样。另外我下面提到了我目前正在使用的脚本：

<script>

jQuery(document).ready(function(){

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

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>

谁能建议我如何解决这个问题。

Answer 1

您尝试使用这条线为轴引入边距：

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

这似乎与 Firefox 不兼容。相反，使用您已注释掉的附加 g 元素以常规方式执行此操作：

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

运行代码：

<!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>