时间戳

首页 > 解决方案 > 个性化轴范围

javascript - 个性化轴范围

问题描述

我的值在这些范围内（40 万到 6 亿）

在此处输入图像描述

我想在 D3 图上创建一个全面的 y 轴。如果我使用对数刻度，大数的所有变化都会被删除，如果我使用线性刻度，小数的所有变化也会被删除。

因此我想到了做两轴（一个在另一个轴上，如下图所示），但我不知道是否有更简单的方法。我可以指定所有刻度值以获得所有变化都可见的轴吗？

谢谢你。

在此处输入图像描述

标签： javascriptd3.jsplot

解决方案

使用在域和范围中具有两个以上值的常规线性刻度，从而创建分段刻度。

例如：

const scale = d3.scaleLinear()
    .domain([0, 5e7, 1e8, 6e8])
    .range([h-10, h/2 + 10, h/2 - 10, 10]);

这是运行代码：

const svg = d3.select("svg");
const h = 600;
const scale = d3.scaleLinear()
  .domain([0, 5e7, 1e8, 6e8])
  .range([h - 10, h / 2 + 10, h / 2 - 10, 10]);
const axis = d3.axisLeft(scale).tickValues(scale.ticks().concat(d3.range(0, 5e7, 5e6)))(svg.append("g").attr("transform", "translate(100,0)"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="200", height="600"></svg>

不要忘记确保用户理解 y 轴被截断，最好有清晰的注释显示。

推荐阅读