javascript - D3js 折线图 Y 轴上的不同刻度大小

Question

到目前为止，我还没有找到任何这样的例子，但我希望 Stack 的读者以前遇到过这种情况。

我们有一个 Y 轴，其范围从 0-200 并不是很有趣。我们想要“挤压”y 轴的这个区域，并让间隙随着 Y 轴值的增长而变大，以便频谱的顶端在线图中显示出更多的移动。

这意味着 Y 轴上的刻度会随着范围的增加而增大，并允许图表在频谱顶端附近显示更大的差异。

我可以看到 Y 不接受函数，但是有人做过类似的事情吗？如果是的话，有人有任何工作示例吗？

如果 D3 不可能，有人用 highcharts 做过类似的事情吗？

Answer 1

注意

如果您使用这样的比例，请确保图表中的想法仍然清晰。请注意，这些线仅基于起点和终点构建，并且在穿过轴中断点时不会“扭结”。 在编写答案时，我不知道您有一个折线图并且值低于 200。

回答

假设您想使用线性刻度，您可以例如请尝试以下操作:

newScale = d3.scale.linear().domain([0,200,1000]).range([0,100,1000])

轴可以例如看起来像这样:

var xAxis = d3.svg.axis()
  .scale(newScale)
  .orient('bottom');
d3.select("#someSVG").append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0, " + 123 + ')')
  .call(xAxis);

因此，您会得到:

查看您的代码笔，您可能想尝试:

var y = d3.scale.linear().range([height,height * 9 / 10, 0]);

然后用作域:

y.domain([0, 200, d3.max(data, function (d) {
        return d.close;
    })]);

因此，在此示例中，您将高度的 1/10 分配给前 200 个。