[英]D3: Graph doesn't display the x and y axis
I have this d3 project but I can't seem to display my x and y axis properly. 我有这个d3项目,但似乎无法正确显示我的x和y轴。 It only displays the first 2 numbers on the y axis and that's it.
它仅在y轴上显示前2个数字,仅此而已。 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();
You're working with a pane size of w1000, h600 (+margin). 您正在使用w1000,h600(+ margin)的窗格大小。 Size your SVG element (in CSS) accordingly, and the chart will show as expected:
相应地调整您的SVG元素的大小(在CSS中),该图表将按预期显示:
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. PS:您也可以在JS代码中设置svg大小,因此您只能在一个位置定义这些数字。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.