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

Question

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

{'March 19, 2018', 'April 24, 2018', 'May 19, 2018', 'June 4, 2018', 'July 6, 2018'}

我希望 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前面加上了+，确保返回的值是数字，而不是日期对象。我给了最小值和最大值，这样你就可以在两边都有一些填充，但你只需要使用你想要的那些。

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

d3 line graph - how to start line to the right of Y axis?

javascript

linechart

d3.js