javascript - D3:每 7 年在 x 轴上缩放数据
问题描述
我有一个 d3 项目,我想在其中包含我所有的日期,但仅限于特定的时间间隔。现在它显示所有太杂乱的东西。我只想每 7 年在 x 轴上显示一次标签。例如 1947、1954、1961、1968 等。请帮助并提前感谢您。
这是我的代码:
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);
//dynmaic height
/*var margin = {top: 20, right: 200, bottom: 0, left: 20},
width = 300,
height = datajson.length * 20 + margin.top + margin.bottom;*/
//create measurements
const margin = 60
const width = 1000 - margin;
const height = 600 - margin;
const maxYScale = d3.max(json.data, (d) => d[1]);
//date formatter
const formatDate = d3.timeParse("%Y-%m-%d"); //convert from string to date format
const parseDate = d3.timeFormat("%Y"); //format date to cstring
//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, maxYScale]); //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(json.data.filter((date, key) => { return (key % 20 === 0)}).map((d)=> parseDate(formatDate(d[0]))))
.domain(json.data.map((d)=> parseDate(formatDate(d[0]))))
.padding(0.2);
//create x-axis
const xAxis = d3.axisBottom(xScale);
//append x-axis
chart.append("g")
.attr(`transform`, `translate(0, ${height})`)
.call(xAxis);
//make bars
chart.selectAll("rect")
.data(json.data)
.enter()
.append("rect")
.attr("x", (d) => xScale(parseDate(formatDate(d[0]))))
.attr("y", (d) => yScale(d[1]))
.attr("height", (d) => height - yScale(d[1]))
.attr("width", xScale.bandwidth())
}
}
loadData();
这是我的代码笔: 代码笔
解决方案
当我找到解决方案时,我将回答我自己的问题。为了在 x 轴上设置间隔,我只使用了 tickValues。然后我使用我的比例和过滤功能根据我拥有的数据过滤间隔。下面你可能会找到答案。
const xAxis = d3.axisBottom(xScale)
.tickValues(xScale.domain().filter(function(d) { return (d % 7 === 0)}));
推荐阅读
- javascript - 表单提交 isset 不起作用,当我单击按钮时,它总是说大声笑而不是说工作
- outlook - OneNote 加载项在 Outlook 中灰显
- visual-studio-code - VSCode 扩展贡献下拉菜单
- firebase - 如何使用 web 应用程序的 firebase 身份验证实现谷歌一键登录?
- javascript - 限制对应用 UI 外部 Firestore DB 的写入访问
- tensorflow - 来自 TensorFlow 的这条红色消息是错误的吗?
- java - 计算属性的对象 ArrayList 中的出现次数
- android - Paytm 集成问题:android 和 nodejs 上的校验和无效
- javascript - Vue:按住键盘修饰符时如何更改按钮的文本?
- angular - 如何修复错误:类型 FroalaEditorModule 没有“ngModuleDef”属性使用 Froala Wysiwyg