在 D3js 多线图表上的 x 标题上方添加空格

发布于 2025-01-20 16:42:34 字数 590 浏览 4 评论 0原文

我正在尝试在D3J多行图上添加Xcaption和X轴标签之间的空间，但无法。另外，我如何摆脱最后的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');

原文

I am trying to add space between xCaption and x-axis labels on D3js multiline chart but not able to. Also, how can I get rid of the last x-label (the one after 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');

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

一影成城 2025-01-27 16:42:34

您可以通过更改 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; }

You can slide down your x caption by changing y:

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');

Those little ticks at the end are usually part of the axis domain. Use the css: