个性化轴线范围

Question

我有这样的价值范围(四亿到六亿)

​

​

我想在D3图上创建一个综合的y轴。如果我使用一个日志刻度，那么巨大数字中的所有变化都会被删除，如果我使用一个linearScale，那么小数字中的所有变化也会被删除。

因此，我想做两个轴(一个对另一个，就像在下面的图片)，但我不知道是否有更简单的方法。我是否可以指定所有的滴答值来获得一个所有变化都是可见的轴？

谢谢。

​

​

Answer 1

在域和范围中使用具有超过两个值的常规线性标度，从而创建分片标度。

例如：

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轴是截断的，最好有一个清晰的注释显示这一点。