D3js折线图的Y轴上的刻度大小不同
BigglesWorth先生
到目前为止，我还没有找到任何这样的例子，但是我希望Stack的读者以前遇到过这种情况。
我们有一个Y轴，从0到200的范围不是很有趣。我们希望“压缩” y轴的该区域，并随着Y轴值的增大而使间隙变大，从而使光谱的顶端在线图中显示出更多的运动。
这意味着，Y轴上的刻度会随着其范围的增大而增长，并使该图在频谱的顶端附近显示更大的差异。
我可以看到Y没有函数，但是有人做过这样的事情吗？如果有，有人有工作示例吗？
如果D3无法做到这一点，是否有人对highcharts做过类似的事情？
企鹅德克
笔记
如果使用这样的比例，请确保图表中的思路仍然清晰。请注意，这些线仅基于起点和终点而构建，并且在轴上沿断点移动时不会“扭曲”。在写答案时，我不知道您有一个折线图，其值小于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);
因此，您将获得：
查看您的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个高度。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
D3 折线图 - 在 Y 轴刻度和非刻度上显示值标签
- 2
D3JS折线图在折线之间的过渡
- 3
为什么我的D3js折线图无法呈现值和X轴？
- 4
D3js折线图mouseOver
- 5
D3JS折线图倒排问题
- 6
D3js折线图配置
- 7
尽管y轴本质上是递增的，但D3折线图向后绘制
- 8
D3.js-折线图：缩放时区域路径超过x和y轴
- 9
d3.js中的双Y轴折线图，没有外部数据
- 10
如何创建堆积的折线图D3，多个Y轴和公共X轴
- 11
轴上的自定义刻度大小（d3js）
- 12
dc.js中的双Y轴折线图
- 13
dc.js中的双Y轴折线图
- 14
d3js折线图错误-绘制怪异区域
- 15
d3js多折线图，具有焦点+上下文缩放
- 16
D3JS从数组数据绘制折线图（数据未定义错误）
- 17
在d3js中堆叠多个折线图而不嵌套数据
- 18
如何摆脱d3js中的重叠折线图
- 19
d3js 使缩放在折线图上工作
- 20
D3在时间轴上内插折线图
- 21
折线图d3 js-- x轴月
- 22
d3.js如何绘制带有垂直x轴标签的折线图
- 23
D3.js折线图-无法看到靠近轴的线
- 24
SSRS折线图动态Y轴
- 25
在一个图中绘制两个折线图时，在y轴上显示不同的缩放比例
- 26
d3.js在鼠标悬停时更改折线图点的颜色和大小
- 27
d3JS：在折线图/面积图上缩小时，绘制大数据集的低密度数据版本
- 28
d3js-折线图`circle`在线条上的位置设置不正确
- 29
d3js-折线图`circle`在线条上的位置设置不正确
我来说两句