如何解决d3.js中x轴上的重叠刻度文本

Posted 2023-02-22

【中文标题】如何解决d3.js中x轴上的重叠刻度文本

【英文标题】：How to solve the overlapping tick texts on xAxis in d3.js

【发布时间】：2022-01-20 04:01:11

【问题描述】：

我正在尝试实现一个折线图，它在 x 轴上有公司，在 Y 轴上有数字。 x 轴（国家）上的刻度值（文本）是重叠的。我已将 scalePoint 刻度用于 x 轴，将 scaleLinear 用于 y 轴。

const svg = d3.select('svg');
svg.style('background-color', 'none');


const width = +svg.attr('width');
const height = +svg.attr('height');

const render = data => 

    const xValue = d => d.FullName;
    const yValue = d => d.TotalCount;

    const margin =  top: 100, right: 70, bottom: 30, left: 100 ;
    const innerWidth = width - margin.left - margin.right;
    const innerHeight = height - margin.top - margin.bottom;

    const xScale = d3.scalePoint()
        .domain(data.map(xValue))
        .range([0, innerWidth]);

    const yScale = d3.scaleLinear()
        .domain([0, d3.max(data, yValue)])
        .range([innerHeight, 0])
        .nice();

    const xAxis = d3.axisBottom(xScale)
        .tickPadding([10])
    const yAxis = d3.axisLeft(yScale)
        .tickPadding([10])
        .tickSize(-innerWidth);

    const g = svg.append('g')
        .attr('transform', `translate($margin.left,$margin.top)`);

    const lineGenerator = d3.line()
        .x(d => xScale(xValue(d)))
        .y(d => yScale(yValue(d)));

    g.append('path')
        .attr('class', 'line-path')
        .attr('d', lineGenerator(data));

    g.selectAll('circle').data(data)
        .enter().append('circle')
        .attr('cx', d => xScale(xValue(d)))
        .attr('cy', d => yScale(yValue(d)))
        .attr('r', 4)
        


    g.append('g').call(yAxis)
        .selectAll('.domain')
        .remove();


    const xAxisG = g.append('g').call(xAxis)
        .attr('transform', `translate(0,$innerHeight)`)


    xAxisG
        .selectAll('.domain,.tick line')
        .remove();
    xAxisG

        g.append('text')
        .attr('class', 'title')
        .attr('y', -20)
        .text('Top 10 Accounts')


d3.csv('Q3-Top Accounts.csv').then(data => 
    data.forEach(d => 
        d.TotalCount = +d.TotalCount;
    );
    render(data);
);

x 轴刻度值不应重叠。刻度文本之间应有空格。请帮我找到解决此问题的方法。

上述代码的结果如下所示

下面是预期的图像。请忽略这些值。只需要帮助安排下图中的刻度文本。谢谢。

【参考方案1】：

也许您可以在 x 轴上将刻度标签旋转 90 度。想旋转标签的可以关注this link。

【讨论】：

感谢canozsoy 的回复。有没有办法在不旋转的情况下在刻度文本之间获得空间？

如果移动刻度标签的位置，它们不会显示错误的数据吗？