Question

我正在使用react，d3图表生成折线图。我使用d3.min和d3.max来生成x和y轴的最小值和最大值。 xAxis的所有数据都以字符串格式表示，例如“ 2017-12-31”，我正在使用timeparse将字符串解析为日期格式，并将其传递给x轴。

现在xAxis比例显示为1月，2月，3月....

    g.append("g")
        .attr("class", "axis axis--x")
        .attr("transform", "translate(0," + height + ")")
        .call(d3Axis.axisBottom(x).tickFormat(d3Time.timeFormat("%b")))

现在，只要xAxis的最小值是月份的最后日期，它就不会出现在xAxis的比例尺中。

例如，如果最小值为“ 2018-07-01”，则轴刻度将显示为“ 7月，8月，9月，10月”

但是如果最小值为'2018-07-31'，则轴刻度将显示为“ Aug，Sep，Oct”

格式化数据的方式是将所有以前月份的日期显示为该月的最后一天。

ex: [{date: '2018-07-31', value: 10}, 
     {date: '2018-08-31', value: 10},
     {date: '2018-09-30', value: 10},
     {date: '2018-10-31', value: 10}]

即使最小值是一个月的最后一天，也可以显示月份名称。

Answer 1

在这种情况下，您会寻找

d3.scaleTime().nice。

引用文档：

此方法通常会修改比例尺的域，并且只能将范围扩展到最接近的舍入值。如果域是根据数据（例如，使用范围）计算出来的，并且可能是不规则的，则切分很有用。

不使用nice方法的示例

var data = [{date: '2018-07-31', value: 10}, 
     {date: '2018-08-31', value: 10},
     {date: '2018-09-30', value: 10},
     {date: '2018-10-31', value: 10}];

var parseTime = d3.timeParse('%Y-%m-%d');

data.forEach(function (d) {
	d.date = parseTime(d.date);	
});
var svg = d3.select('body').append('svg').attr('width', 500).attr('height', 400);

var gAxis = svg.append('g').classed('x axis', true);

var xScale = d3.scaleTime().domain(d3.extent(data, d => d.date)).range([10, 490]);

var xAxis = d3.axisBottom(xScale).tickFormat(d3.timeFormat("%b"));

gAxis.call(xAxis);

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

使用电子秤的nice方法的示例

var data = [{date: '2018-07-31', value: 10}, 
     {date: '2018-08-31', value: 10},
     {date: '2018-09-30', value: 10},
     {date: '2018-10-31', value: 10}];

var parseTime = d3.timeParse('%Y-%m-%d');

data.forEach(function (d) {
	d.date = parseTime(d.date);	
});
var svg = d3.select('body').append('svg').attr('width', 500).attr('height', 400);

var gAxis = svg.append('g').classed('x axis', true);

var xScale = d3.scaleTime().domain(d3.extent(data, d => d.date)).range([10, 490]).nice();

var xAxis = d3.axisBottom(xScale).tickFormat(d3.timeFormat("%b"));

gAxis.call(xAxis);

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

希望这会有所帮助。

在d3折线图中，如果日期是该月的最后一天，则无法看到该月的名称

1 个答案: