如何解決d3.js中xAxis上重疊的刻度文本-有解無憂

我正在嘗試實作一個折線圖，其中 x 軸上有公司，Y 軸上有數字。x 軸（國家/地區）上的刻度值（文本）重疊。我使用了 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 軸刻度值不應重疊。刻度文本之間應有空格。請幫助我找到此問題的解決方案。

上面代碼的結果是這樣的如何解決 d3.js 中 xAxis 上重疊的刻度文本

uj5u.com熱心網友回復：

也許您可以在 x 軸上將刻度標簽旋轉 90 度。如果要旋轉標簽，可以點擊此鏈接。

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/386171.html

標籤：javascript d3.js

上一篇：元宇宙區塊鏈的元宇宙3D【NFT】ARRG移動端游戲【Curtis Sword】

下一篇：帶軸的D3JS樹