时间戳

首页 > 解决方案 > 如何在d3中设置x轴的年份范围

javascript - 如何在d3中设置x轴的年份范围

问题描述

我是 d3js 的新手，我在使用 mi d3 折线图时遇到问题，如果你能看到我的图表按年显示所有数据，但我的问题是我想做什么，我不知道怎么做，是吗在 x 轴上逐年出现，但它是这样显示的。 图 1

这是每 5 年一次，我希望它每年都出现。 图 2

这是我的代码的一部分：

 //Set the ranges for the line
var x = d3.scaleTime().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);

//Define the 1st line
var valueline = d3.line()

.x(function(d) { return x(d.DATE); })
    .y(function(d) { return y(d.DDDM01USA156NWDB); });


//Set the domains for the lines
x.domain(d3.extent(data, function(d) { return d.DATE; }));

y.domain([20, 160]);

//Set axis for the lines
var xAxis = d3.axisBottom()
    .scale(x);

var yAxis = d3.axisLeft()
    .scale(y);

//Gridlines in x axis function
var gridlineX = d3.axisBottom(x)
    .tickSize(-height)
    .tickFormat("");


//Add the X gridlines
svg.append("g")
    .attr("class", "grid")
    .attr("transform", "translate(0," + height + ")")
    .call(gridlineX);

//Gridlines in y axis function
var gridlineY = d3.axisLeft()
    .tickSize(-width)
    .tickFormat("%")
    .scale(y);

//Add the Y gridlines
svg.append("g")
    .attr("class", "grid2")
    .call(gridlineY);

//--------------Add the valueline path------------------
//Path (line Chart) transitions
function lineTransition(path) {
    path.transition()
        .duration(2000)
        .attrTween("stroke-dasharray", tweenDash);
}

function tweenDash() {
    var l = this.getTotalLength(),
        i = d3.interpolateString("0," + l, l + "," + l);

    return function(t) {
        return i(t);
    };
}

//Add the valueline path for line 1
svg.append("path")
    .datum(data)
    .attr("class", "line")
    .attr("id", "line1")
    .style("stroke", "#7C6CAA")
    .style("stroke-width", "3")
    .attr("d", valueline);
//Transition
svg.select("#line1")
    .datum(data)
    .attr("d", valueline)
    .call(lineTransition);

//xlabel    
svg.append("text")
    .attr("transform",
        "translate(" + (width / 2) + " ," +
        (height + margin.top + 20) + ")")
    .style("text-anchor", "middle")
    .attr("dy", ".80em")
    .text("Year");
//ylabel
svg.append("text")
    .attr("class", "y label")
    .attr("text-anchor", "end")
    .attr("y", 6)
    .attr("dy", ".75em")
    .attr("transform", "rotate(-90)")
    .text("Percent");

//Add the X Axis
svg.append("g")
    .attr("class", "x axis axisGrey")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis)
    .selectAll("text")
    .style("text-anchor", "end")
    .attr("dx", "-.8em")
    .attr("dy", ".15em")
    .style("font-size", "12px")
    .attr("transform", "rotate(-65)");

//Add the y Axis
svg.append("g")
    .attr("class", "y axis axisGrey")
    .call(yAxis)
    .selectAll("text")
    .style("text-anchor", "end")
    .attr("dx", "-.8em")
    .attr("dy", ".15em")
    .style("font-size", "12px")

我获取数据的 csv 文件是这样的：

DATE,DDDM01USA156NWDB,年份,Dato 1/1/1984,42.5146,1984,0 1/1/1985,44.873,1985,0 1/1/1986,52.5561,1986,0 1/1/1987,52.3852,1987, 0 1/1/1988,50.667,1988,0 1/1/1989,54.6595,1989,0 1/1/1990,54.5632,1990,160 1/1/1991,58.7687,1991,160 1/1/1992 ,66.732,1992,0 1/1/1993,71.4563,1993,0 1/1/1994,71.3222,1994,0 1/1/1995,79.144,1995,0 1/1/1996,95.619,1996,0 1/1/1997,112.103,1997,0 1/1/1998,130.576,1998,0 1/1/1999,143.673,1999,0 1/1/2000,146.193,2000,0 1/1/2001, 138.332,2001,160 1/1/2002,114.902,2002,0 1/1/2003,110.685,2003,0 1/1/2004,125.554,2004,0 1/1/2005,128.392,2005,0 1 /1/2006,133.386,2006,0 1/1/2007,137.361,2007,160 1/1/2008,109.698,2008,160 1/1/2009,92.9573,2009,160 1/1/2010,108.321 ,2010,0 1/1/2011,107.384,2011,0 1/1/2012,107.025,2012,0 1/1/2013,128.708,2013,0 1/1/2014,146.209,2014,0 1/ 1/2015,142.648,2015,0 1/1/2016,141.286,2016,0 1/1/2017,153.96,2017,0

标签： javascriptd3.jslinechart

解决方案

您可以使用axis.ticks()方法来指定您希望轴的刻度数。

这并不能保证d3会呈现您请求的刻度数。相反，d3将尝试选择一些与您的请求相近的刻度，这些刻度仍然对您的数据有意义。

换句话说，它不会显示人类无法直观理解的时间间隔，例如一年的 1.2387，而是显示更合理的时间间隔，例如半年、一年等。

但是，我认为如果您知道时域的最小值和最大值，那么您将能够提供该域中的年数作为该ticks()方法的参数。

var minYear = d3.min(data, d => d.date).getFullYear();
var maxYear = d3.max(data, d => d.date).getFullYear();
var numYears = maxYear - minYear;
var xAxis = d3.axisBottom(xScale).ticks(numYears);

推荐阅读