Javascript D3:图形不显示x轴和y轴
我有这个d3项目,但我似乎无法正确显示我的x轴和y轴。它只显示y轴上的前两个数字,仅此而已。有人能帮我解释一下为什么它没有显示出来吗。我错过了什么 代码如下:Javascript D3:图形不显示x轴和y轴,javascript,d3.js,charts,Javascript,D3.js,Charts,我有这个d3项目,但我似乎无法正确显示我的x轴和y轴。它只显示y轴上的前两个数字,仅此而已。有人能帮我解释一下为什么它没有显示出来吗。我错过了什么 代码如下: loadData = ()=> { req = new XMLHttpRequest(); req.open("GET", "https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json" , true);
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();
这是我的密码笔:
您使用的窗格大小为w1000,h600+边距。相应地调整CSS中SVG元素的大小,图表将按预期显示:
svg {
width: 1030px;
height: 630px;
}
PS:或者在JS代码中设置svg大小,因此您必须只在一个地方定义这些数字