Question

以下是我要解析的日期：

这是我的代码：

 this.x  = d3.scaleTime().domain(d3.extent(this.dataArray, d => {return d[ this.xType ];})).range([ this.margin.left, this.width - this.margin.right ]);
        this.y0 = d3.scaleLinear().domain([ this.getMin(this.yType1, this.yType0), this.getMax(this.yType1, this.yType0) ]).range([ this.height, 0 ]);
        this.y1 = d3.scaleLinear().domain([ this.getMin(this.yType1, this.yType0), this.getMax(this.yType1, this.yType0) ]).range([ this.height, 0 ]);

        this.xAxis      = d3.axisBottom(this.x);
        this.yAxisLeft  = d3.axisLeft(this.y0).ticks(5);
        this.yAxisRight = d3.axisRight(this.y1).ticks(5);

问题在于第一个日期（2010）正在从x轴截断，并且最后会添加额外的刻度，但是图表是正确的。

如果我将.nice(this.dataArray.length)添加到this.x = ...，则2010年最后会添加2017年。

如何解决此问题？谢谢。

Answer 1

您可以map您的数据：

var ticks = data.map((d)=>d);

在tickValues：

中使用此数组

var axis = d3.axisBottom(scale)
    .tickValues(ticks);

这是一个演示：

＆＃13;

var width = 500,
    height = 100;

var svg = d3.select("body")
    .append("svg")
    .attr("width", width)
    .attr("height", height);

var parse = d3.timeParse("%Y-%m-%d");

var data = ["2010-12-31",
    "2011-12-31",
    "2012-12-31",
    "2013-12-31",
    "2014-12-31",
    "2015-12-31",
    "2016-12-31"
];

data.forEach((d, i, a) => a[i] = parse(d));

var ticks = data.map((d) => d)
var format = d3.timeFormat("%Y")

var scale = d3.scaleTime()
    .domain(d3.extent(data, d => d)).range([20, width - 20]);

var axis = d3.axisBottom(scale).tickValues(ticks).tickFormat((d) => format(d));

var gX = svg.append("g")
    .attr("transform", "translate(0,50)")
    .call(axis);

＆＃13;

<script src="https://d3js.org/d3.v4.min.js"></script>

＆＃13;

如何修复d3折线图的timeScale？

1 个答案: