d3 js 中的网格线与轴不匹配

Question

我正在尝试使用 d3.js 在 React 中制作多折线图。该图看起来不错并且显示得很好，但有时网格线没有对齐。它是非常随机的，有时有些图表的网格线对齐，有些则没有。这是其中一些的外观：

我的网格线有以下代码：

        svg
            .append('g')
            .attr('class', 'grid')
            .attr('transform', `translate(0,${height})`)
            .call(
                d3.axisBottom(xScale)
                    .tickSize(-height)
                    .tickFormat(() => ""),
            );
        svg
            .append('g')
            .attr('class', 'grid')
            .call(
                d3.axisLeft(yScale)
                    .tickSize(-width)
                    .tickFormat(() => ""),
            );

我遵循了这个例子：https://betterprogramming.pub/react-d3-plotting-a-line-chart-with-tooltips-ed41a4c31f4f

任何关于如何完美对齐这些线的帮助将不胜感激。

Answer 1

您可以考虑 nice调整您的 y 尺度，以便向下/向上舍入数据集的最小值和最大值，使刻度间隔相等。

在您的教程中，这段代码：

const yScale = d3
    .scaleLinear()
    .range([height, 0])
    .domain([0, yMaxValue]);

可以变成：

const yScale = d3
    .scaleLinear()
    .range([height, 0])
    .domain([0, yMaxValue])
    .nice(); // <--------------------------- here

这是在 x 尺度上使用 nice 的基本示例，其中第一个示例是 'not nice'，第二个示例是 'nice'。

// note gaps of 10 between data points
// apart from first and last where gap is different
const data = [3, 4, 14, 24, 34, 44, 47];

// svg
const margin = 20;
const width = 360;
const height = 140;
const svg = d3.select("body")
  .append("svg")
  .attr("width", width + margin + margin)
  .attr("height", height + margin + margin);
  
// scale without 'nice'
const xScale1 = d3.scaleLinear()
  .range([0, width])
  .domain(d3.extent(data));

// scale with nice
const xScale2 = d3.scaleLinear()
  .range([0, width])
  .domain(d3.extent(data))
  .nice();
  
// plot axes with both scales for comparison
// not 'nice'
svg.append("g")
  .attr("transform", `translate(${margin},${margin})`)
  .call(d3.axisBottom(xScale1));

// 'nice'
svg.append("g")
  .attr("transform", `translate(${margin},${margin + 50})`)
  .call(d3.axisBottom(xScale2));

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

d3 js 中的网格线与轴不匹配

Grid lines in d3 js don't match the axes

javascript

charts

d3.js

typescript

reactjs