我有一个折线图,其中日期代表 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)');
最佳答案
在设置您的 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 前面添加了 +
以确保返回值是数字而不是日期对象。我给出了最小值和最大值,以便您可以在两侧都有一些填充,但您只需要使用您想要的那些。
关于javascript - d3 线图 - 如何从 Y 轴右侧开始线?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55339625/