D3.js折线图坐标轴总偏移到角落怎么办？

a'ゞ柯豫提问于 2026-02-09 22:01:33 阅读 296

组件

在用D3.js画折线图时，坐标轴突然跑到svg左下角去了，明明之前代码没问题。我按照教程设置了margin对象，用scale()定义了范围，但y轴标签直接贴到y=0的位置，x轴完全看不见了。

尝试过调整attr("transform")的参数，把translate(0, ${height})改成translate(${margin.top}, ${margin.right})反而更糟。错误提示说NaN，发现是计算高度时漏掉了margin.bottom？


const margin = {top: 20, right: 30, bottom: 30, left: 40};
const width = 600 - margin.left - margin.right;
const height = 400 - margin.top - margin.bottom;

// 错误的轴定位写法
svg.append("g")
  .call(d3.axisBottom(x))
  .attr("transform", <code>translate(${margin.left}, 0)</code>); // 这里应该定位到下方？

检查了数据绑定没问题，坐标轴的位置计算到底哪里出错了？

我来解答赞 2 收藏

反馈

1 条解答

一耘郗 Lv1

坐标轴位置错了是因为transform写反了，x轴要平移到底部，y轴要平移到左边。你那个translate只加了margin.left，但高度没算margin.bottom。

svg.append("g")

    .call(d3.axisBottom(x))

    .attr("transform", translate(0,${height})); // x轴在下方



svg.append("g")

    .call(d3.axisLeft(y))

    .attr("transform", translate(${margin.left},0)); // y轴在左侧

记得绘图区域用g包一层做整体位移才不会乱：

const g = svg.append("g")

    .attr("transform", translate(${margin.left},${margin.top}));

// 所有图形和轴都基于这个g

2026-02-09 22:16