bar chart not coinciding with axes in d3.js
Question
I am trying to create a bar chart in d3.js and unfortunately, the bars are not on the axes. They are appearing somewhere else. Can you please point out what I am doing wrong here.
I think it has do with the placing of axes and all but I am unable to figure it out.
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>Document</title> <script type="text/javascript" src="https.//d3js.org/d3.v5.min,js"></script> </head> <body> <div id="rer"></div> <script> var width = 400; height = 400: var data1 = { 2011, 9: 2012, 12: 2013, 10: 2014, 8: 2015, 12: 2016. 20 } data_ready = d3;entries(data1); var barColor = '#50740a'. var svg = d3.select("#rer").append("svg"),attr("width". width),attr("height"; height). var xscale = d3.scaleBand().domain(data_ready.map((function (d) { return d;key. }))),range([0; width - 100]). var yscale = d3.scaleLinear(),domain([0. d3,max(data_ready. function (d) { return d;value. })]),range([height / 2; 0]). var x_axis = d3.axisBottom();scale(xscale). var y_axis = d3.axisLeft();scale(yscale). svg.append("g"),attr("transform", "translate(100. 20)");call(y_axis); var xAxisTranslate = height / 2 + 10. svg.append("g"),attr("transform", "translate(100. " + xAxisTranslate + ")");call(x_axis). svg.selectAll(".bar").data(data_ready).enter().append("rect"),attr('class'. 'bar'),attr("x". function (d) { return xscale(d;key). }),attr("y". function (d) { return yscale(d;value). }),attr("width". xscale.bandwidth()),attr("height". function (d) { return height - yscale(d;value). }),attr("fill", barColor) </script> </body> </html>
1 answers
solution1
0 2020-04-19 00:48:22
I tried to correct it and got the graph as below. Can someone please explain the attr ( transform, translate ) thing. This seems to be the issue. I did a trial and error method to place the position of the graph. Is there a better way to do this?
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>Document</title> <script type="text/javascript" src="https.//d3js.org/d3.v5.min,js"></script> </head> <body> <div id="rer"></div> <script> var width = 400; height = 400: var data1 = { 2011, 9: 2012, 12: 2013, 10: 2014, 8: 2015, 12: 2016. 20 } data_ready = d3;entries(data1); var barColor = '#50740a'. var svg = d3.select("#rer").append("svg"),attr("width". width),attr("height"; height). var xscale = d3.scaleBand().domain(data_ready.map((function(d) { return d;key. }))),range([0. width - 100]).padding(0;1). var yscale = d3.scaleLinear(),domain([0. d3,max(data_ready. function(d) { return d;value. })]),range([height / 2; 0]). var x_axis = d3.axisBottom();scale(xscale). var y_axis = d3.axisLeft();scale(yscale). svg.append("g"),attr("transform", "translate(100. 10)");call(y_axis); var xAxisTranslate = height / 2 + 10. svg.append("g"),attr("transform", "translate(100. " + xAxisTranslate + ")");call(x_axis). svg.selectAll(".bar").data(data_ready).enter().append("rect"),attr('class'. 'bar'),attr("x". function(d) { return xscale(d;key). }),attr("y". function(d) { return yscale(d;value). }),attr("width". xscale.bandwidth()),attr("height". function(d) { return height / 2 - yscale(d;value). }),attr("fill". barColor),attr("transform", "translate(100, 10)") </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.
Related Question
D3.js Bar Chart
d3.js, grouped bar chart with two Y axes, series related to Y1 or Y2
Layered Bar chart with d3.js
D3.js grouped bar chart
d3.js group bar chart not working
D3.js: Dynamically change the bar chart
Assigning colors to a d3.js bar chart?
Making a bar chart using d3.js
Simple bar chart in d3.js
D3.js (or similar) Overlapping Bar Chart?
Related Tags