D3js折线图的Y轴上的不同刻度尺寸

Question

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

我们有一个Y轴，其范围从0到200不是很有趣。我们想要＆＃34;压扁＆＃34;当y轴值增大时，y轴的这个区域和间隙变大，使得光谱的顶端在线图中显示出更多的移动。

这意味着Y轴上的刻度将随着它们在范围内上升而增加，并允许图形在光谱顶端附近显示更大的差异。

我可以看到Y没有采取任何功能，但有人做过这样的事情，如果有的话，有没有人有任何工作的例子？

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

Answer 1

注意

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

<强> ANSWER

假设您想要使用线性刻度，您可以例如尝试以下方法：

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);

因此，你会得到：

查看您的codepen，您可能想尝试：

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个。