Question

我有一个折线图，其日期表示X轴。我不想将其线从Y轴开始，而是将其稍微向右移动，以使其更具可读性。如果可能，我还想在X轴刻度列表中添加一个日期。所以基本上，如果我有5个日期的数组，例如：

{'2018年3月19日'，'2018年4月24日'，'2018年5月19日'，'2018年6月4日'，'2018年7月6日'}

我希望2018年3月19日不直接显示在X轴= 0上。但是，我仍然希望在X轴= 0上有一个刻度值，例如数组中的第一个日期减去一个月。这有意义吗？使用d3可以轻松做到这一点吗？

const circleLabelDrawDuration = 700;
const minDate = data[0].pullDate.setMonth(data[0].pullDate.getMonth() - 4);
const maxDate = data[data.length - 1].pullDate;

const xAxis = d3.scaleTime().domain([minDate, maxDate]).range([0, width]);

svg.append('g').call(d3.axisBottom(xAxis).ticks(pullDates.length).tickValues(pullDates).tickFormat(d3.timeFormat("%b %Y")))
.attr('transform', `translate(0,${height})`).selectAll('text')
.style('text-anchor', 'end').attr('dx', '-.8em').attr('dy', '-.15em').attr('transform', 'rotate(-50)');

Answer 1

设置x域时，我会执行以下操作。我发现偏移量非常有用。使用某些d3函数可以使其变得更容易。

const monthInMs = 2.628e+9 // this is 1 month in ms
const xMin = +d3.min(dataArray, (d) => d.timestamp) - monthInMs;
const xMax = +d3.max(dataArray, (d) => d.timestamp) + monthInMs;
xScale.domain([xMin, xMax]);

我在d3.min前面添加了+，以确保返回的值是数字而不是日期对象。我同时给定了min和max，以便您可以在两边都进行填充，但是您只需要使用您想要的填充即可。

d3折线图-如何从Y轴右侧开始折线？

1 个答案: