I have this d3 project but I can't seem to display my x and y axis properly. It only displays the first 2 numbers on the y axis and that's it. Can anybody help me why it is not displaying. What am I missing here?
this is the code:
loadData = ()=> {
req = new XMLHttpRequest();
req.open("GET", "https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json" , true);
req.send();
req.onload= ()=>{
json = JSON.parse(req.responseText);
//create measurements
const margin = 60
const width = 1000 - margin;
const height = 600 - margin;
//create svg
const svg = d3.select("svg");
const chart = svg.append("g")
.attr("transform", `translate(${margin}, ${margin})`);
//y-axis: split charts into 2 equal parts using scaling function
const yScale = d3.scaleLinear()
.range([height, 0]) //length
.domain([0,100]); //content
//create x-axis
const yAxis = d3.axisLeft(yScale);
//append y-axis
chart.append("g")
.call(yAxis);
//create x-scale
const xScale = d3.scaleBand()
.range([0, width]) //length
.domain([0,100]) //content
.padding(0.2);
//create x-axis
const xAxis = d3.axisBottom(xScale);
//append x-axis
chart.append("g")
.attr(`transform`, `translate(0, ${height})`)
.call(xAxis);
}
}
loadData();
This is my codepen: codepen
You're working with a pane size of w1000, h600 (+margin). Size your SVG element (in CSS) accordingly, and the chart will show as expected:
svg {
width: 1030px;
height: 630px;
}
PS: Alternatively set the svg size in your JS code, thus you have to define those numbers only in one place.
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.