I have created d3 responsive bar chart.it was working fine in chrome but when i am rendering same chart on Mozilla browser the y - axis scale is not visible.i am unable to understand why he is behaving like this.Also i have mentioned below my script that currently i am using :
<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>
can nay one suggest me how i can fixed that issue.
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.