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

Question

我正在尝试实现一个折线图，其中公司在 x 轴上，数字在 Y 轴上。 x 轴（国家/地区）上的刻度值（文本）是 overlapping.I x 轴使用 scalePoint 刻度，y 轴使用 scaleLinear。

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 轴刻度值不应 overlapped.The 刻度文本应在 them.Please 之间有一个 space 帮助我找到解决此问题的方法。

以上代码的结果如下所示

预期图像是 below.Please 忽略 values.Only 需要帮助安排下面的勾号文本 picture.Thank 你。

Answer 1

或许您可以将刻度标签沿 x 轴旋转 90 度。想要旋转标签的可以关注this link

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

How to solve the overlapping tick texts on xAxis in d3.js

javascript

d3.js