#javascript #d3.js #charts
#javascript #d3.js #Диаграммы
Вопрос:
У меня есть этот проект d3, но, похоже, я не могу правильно отобразить свои оси x и y. Он отображает только первые 2 числа по оси y, и все. Кто-нибудь может мне помочь, почему он не отображается. Чего я здесь не понимаю?
это код:
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();
Это мой codepen:
codepen
Ответ №1:
Вы работаете с размером панели w1000, h600 ( поле). Соответствующим образом измените размер вашего SVG-элемента (в CSS), и диаграмма будет отображаться так, как ожидалось:
svg {
width: 1030px;
height: 630px;
}
PS: В качестве альтернативы задайте размер svg в вашем JS-коде, таким образом, вам придется определять эти цифры только в одном месте.