gpt4 book ai didi

javascript - d3 中线图的 x 轴上带有额外刻度的错误日期打印

转载 作者:行者123 更新时间:2023-11-30 14:11:55 27 4
gpt4 key购买 nike

我正在使用 D3 在 JavaScript 中绘制折线图。折线图的线条绘制正确,但 x 轴上的日期不正确,它还在 x 轴上显示一个额外的刻度。我也曾尝试更改刻度格式,但我失败了。我不知道我哪里做错了。请帮忙。这是我的代码

var margin = {top: 50, right: 50, bottom: 50, left: 50}
, width = window.innerWidth - margin.left - margin.right // Use the window's width
, height = window.innerHeight - margin.top - margin.bottom; // Use the window's height

// The number of datapoints
var n = 4;
var xScale = d3.scaleLinear()

.domain([0, n-1]) // input
.range([0, width]); // output

var parseTime = d3.timeParse("%d-%b-%y");

// 6. Y scale will use the randomly generate number
var yScale = d3.scaleLinear()

.domain([0, 100]) // input
.range([height, 0]); // output


d3.csv("Data_vis.csv", function(data){
//console.log(data);

var nov_11_percent= 22;
var oct_16_percent= 25;
var nov_13_percent= 24;
var oct_22_percent= 21;

var dataset2=[{"date":'2018-09-11', "value": nov_11_percent},
{"date":'2018-10-16', "value": oct_16_percent},
{"date":'2018-10-22', "value": oct_22_percent},
{"date":'2018-11-13', "value": nov_13_percent}];


dataset2.forEach(function(d) {
d.date = new Date(d.date);

});

var line = d3.line()
.x(function(d, i) {
//alert(parseTime(d.date));
return xScale(d.date);

})
.y(function(d,i ) {


return yScale(d.value);

})
.curve(d3.curveMonotoneX)

xScale.domain(d3.extent(dataset2, function(d) {

return d.date; }));

yScale.domain([0, d3.max(dataset2, function(d) {

return d.value;

})]);

var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + height + ")")

.call(d3.axisBottom(xScale)
.ticks(4)
.tickFormat(d3.timeFormat("%Y-%m-%d")));

svg.append("g")
.attr("class", "y axis")
.call(d3.axisLeft(yScale));

svg.append("path")
.datum(dataset2)
.attr("class", "line")
.attr("d", line);

svg.selectAll(".dot")
.data(dataset2)
.enter().append("circle") // Uses the enter().append() method
.attr("class", "dot") // Assign a class for styling
.attr("cx", function(d) { return xScale(d.date) })
.attr("cy", function(d) { return yScale(d.value) })
.attr("r", 10);
});

enter image description here

任何帮助将不胜感激。谢谢

最佳答案

使用 point scale而不是 x 的线性标度。

var xScale = d3
.scalePoint()
.range([0, width])
.domain(dataset2.map(i => i.date))

const margin = { top: 50, right: 50, bottom: 50, left: 50 }
const width = window.innerWidth - margin.left - margin.right // Use the window's width
const height = window.innerHeight - margin.top - margin.bottom // Use the window's height

const dataset2 = [{ date: "2018-09-11", value: 22 },{ date: "2018-10-16", value: 25 },{ date: "2018-10-22", value: 24 },{ date: "2018-11-13", value: 21 }]

dataset2.forEach(function(d) {
d.date = new Date(d.date)
})

// 6. Y scale will use the randomly generate number
const yScale = d3
.scaleLinear()
.domain([
0,
d3.max(dataset2, function(d) {
return d.value
})
]) // input
.range([height, 0]) // output

const xScale = d3
.scalePoint()
.range([0, width])
.domain(dataset2.map(d => d.date))

const line = d3
.line()
.x(function(d, i) {
return xScale(d.date)
})
.y(function(d, i) {
return yScale(d.value)
})
.curve(d3.curveMonotoneX)

const svg = d3
.select("body")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")

svg
.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + height + ")")
.call(
d3
.axisBottom(xScale)
.tickFormat(d3.timeFormat("%m/%d"))
)

svg
.append("g")
.attr("class", "y axis")
.call(d3.axisLeft(yScale))

svg
.append("path")
.datum(dataset2)
.attr("class", "line")
.attr("d", line)
.attr("fill", "none")
.attr("stroke", "black")

svg
.selectAll(".dot")
.data(dataset2)
.enter()
.append("circle") // Uses the enter().append() method
.attr("class", "dot") // Assign a class for styling
.attr("cx", function(d) {
return xScale(d.date)
})
.attr("cy", function(d) {
return yScale(d.value)
})
.attr("r", 10)
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

Codepen

关于javascript - d3 中线图的 x 轴上带有额外刻度的错误日期打印,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54296699/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com