如果xaxis的最后一个刻度是xmax,我尝试删除xaxis的最后一个刻度,以避免刻度与箭头重叠。
但下面的代码不工作:
g.selectAll("g.xaxis g.tick")
.each((d,i,n) => {
if (xmax == d) {
console.log("equal datetime")
}
if ( i == 0 || d == xmax) {
d3.select(n[i]).remove();
}
})
字符串
完整代码:
draw_line()
function draw_line() {
/*
d3.csv("save.csv").then(function(data) {
plot_line(data)
});
*/
var csvtext = `date,close
1-May-12,58.13
30-Apr-12,53.98
27-Apr-12,67.00
26-Apr-12,89.70
25-Apr-12,99.00
24-Apr-12,130.28
23-Apr-12,166.70
20-Apr-12,234.98
19-Apr-12,345.44
18-Apr-12,443.34
17-Apr-12,543.70
16-Apr-12,580.13
13-Apr-12,605.23
12-Apr-12,622.77
11-Apr-12,626.20
10-Apr-12,628.44
9-Apr-12,636.23
5-Apr-12,633.68
4-Apr-12,624.31
3-Apr-12,629.32
2-Apr-12,618.63
30-Mar-12,599.55
29-Mar-12,609.86
28-Mar-12,617.62
27-Mar-12,614.48`
var data = d3.csvParse(csvtext)
plot_line(data)
function plot_line(data) {
var xname = 'date'
var yname = 'close'
var parseTime = d3.timeParse("%d-%b-%y");
data.forEach(function(d) {
d[xname] = parseTime(d[xname]);
d[yname] = +d[yname];
});
var width = 400
var height = 200
var margin = {top:20,left:50,right:20,bottom:30}
var fontsize = 14
var xScale = d3.scaleTime().range([0, width]);
var yScale = d3.scaleLinear().range([height, 0]);
var valueline = d3.line()
.x(function(d) { return xScale(d[xname]); })
.y(function(d) { return yScale(d[yname]); });
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
svg.append('defs')
.append('marker')
.attr('id','arrowhead')
.attr('markerUnits','strokeWidth')
.attr('markerWidth',6)
.attr('markerHeight',6)
.attr('viewBox','0 0 6 6')
.attr('refX',6)
.attr('refY',3)
.attr('orient','auto')
.append('path')
.attr('d','M1,3,L1,1 L5,3 L1,5 z')
.attr('stroke','black')
.attr('fill','black')
.attr('stroke-miterlimit', 10)
var g = svg.append("g")
.attr("transform",`translate(${margin.left},${margin.top})`);
xScale.domain(d3.extent(data,function(d) {return d[xname];}));
yScale.domain([0,d3.max(data,function(d) {return d[yname];})]);
var line = g.append("path")
.data([data])
.attr("class", "line")
.attr("d", valueline)
.attr('fill','none')
.attr('stroke','steelblue')
.attr('stroke-width',2)
var xaxis = g.append("g")
.attr('class','xaxis')
.attr("transform", `translate(${0},${height})`)
.call(d3.axisBottom(xScale)
//.tickFormat((d,i) => null)
//.tickSizeInner(8)
//.tickSize(18)
.tickSizeOuter(0)
);
var yaxis = g.append("g")
.attr('class','yaxis')
.call(d3.axisLeft(yScale)
//.tickFormat((d,i) => null)
//.tickSizeInner(8)
.tickSizeOuter(0)
);
[xaxis,yaxis].forEach(axis => {
axis.select("path")
.attr("marker-end", "url(#arrowhead)");
})
xaxis.selectAll("text")
.attr("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", "rotate(-25)")
.attr('font-size',fontsize)
yaxis.selectAll('text')
.attr('font-size',fontsize)
var xmax = d3.max(data,d => d[xname])
const xnum = xaxis.selectAll(".tick").size();
// add axis grid lines
g.selectAll("g.xaxis g.tick")
.each((d,i,n) => {
if (xmax == d) {
console.log("equal datetime")
}
if ( i == 0 || d == xmax) {
d3.select(n[i]).remove();
}
})
.append("line")
.attr("class", "gridline")
.attr("x1", 0)
.attr("y1", -height)
.attr("x2", 0)
.attr("y2", 0)
.attr("stroke", "#9ca5aecf")
.attr('stroke-width',1)
.attr("stroke-dasharray","4") // make it dashed
var ymax = d3.max(data,d => d[yname])
const ynum = yaxis.selectAll(".tick").size();
g.selectAll('g.yaxis g.tick')
.each((d,i,n) => {
if ( i == 0 || d == ymax) {
d3.select(n[i]).remove();
}
})
.append("line")
.attr("class", "gridline")
.attr("x1", 0)
.attr("y1", 0)
.attr("x2", width)
.attr("y2", 0)
.attr("stroke", "#9ca5aecf")
.attr('stroke-width',1)
.attr("stroke-dasharray","4") // make it dashed
}
}
<script src="https://unpkg.com/[email protected]/dist/d3.min.js"></script>
的数据
1条答案
按热度按时间wtzytmuj1#
您正在比较日期对象。因此,您不能执行
a === b
,您需要将它们转换为您可以比较的内容,例如数字(或字符串),例如使用getTime()
:字符串
下面是更改后的代码:
的数据