d3.js 基于日期时间对象绘制刻度不起作用

shyt4zoc  于 12个月前  发布在  其他
关注(0)|答案(1)|浏览(124)

如果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>

的数据

wtzytmuj

wtzytmuj1#

您正在比较日期对象。因此,您不能执行a === b,您需要将它们转换为您可以比较的内容,例如数字(或字符串),例如使用getTime()

g.selectAll("g.xaxis g.tick")        
    .each((d,i,n) => {
        if (xmax.getTime() == d.getTime()) {
            console.log("equal datetime")
        }
        if ( i == 0 || d.getTime() == xmax.getTime()) {
            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.getTime() == d.getTime()) {
                    console.log("equal datetime")
                }
                if ( i == 0 || d.getTime() == xmax.getTime()) {
                    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>

的数据

相关问题