在 D3js 多线图表的 x-caption 上方添加 space

Question

我正在尝试在 D3js 多线图表的 xCaption 和 x 轴标签之间添加 space，但无法添加。另外，我怎样才能摆脱最后一个 x 标签（5 之后的那个）。

const XCaption = svg.append('g')
        .attr('class', 'x axis')
        .attr('transform', `translate(0, ${height - margin})`)
        .call(xAxis)
        .append('text')
        .attr('x', (width/2) - 24)
        .attr('y', 25)
        .attr('transform', 'rotate(0)')
        .attr('fill', '#437495')
        .attr('font-size', '16px');

Answer 1

您可以通过更改 y 来向下滑动您的 x 标题：

const XCaption = svg.append('g')
        .attr('class', 'x axis')
        .attr('transform', `translate(0, ${height - margin})`)
        .call(xAxis)
        .append('text')
        .text('Sprints')
        .attr('x', (width/2) - 24)
        .attr('y', 30) // move your text down 5 more pixels
        .attr('transform', 'rotate(0)')
        .attr('fill', '#437495')
        .attr('font-size', '16px');

末尾的那些小勾号通常是轴域的一部分。使用 css:

.x.axis .domain { display: none; }

在 D3js 多线图表的 x-caption 上方添加 space

Add space above x-caption on D3js multiline chart

d3.js

charts

multiline

x-axis