有没有办法在轴最大值/最小值处限制"显示"值,同时保留工具提示显示的"实际"值?



你们中的大多数人可能不记得我之前的问题,圆圈没有正确更新具有两级嵌套数据的多行图表。我设法解决了我的问题(尽管我仍然不相信我提出的是100%正确的(;然而,我现在有另一个问题。

我的数据有极端的异常值。结果,我的图表被压缩了,有相当多的空白。例如,参见";现金流量;此JSFiddle中的图表:https://jsfiddle.net/etonblue/a98m52k4/3/.我尝试了中位数、均值、平均值、std-dev等的各种组合,试图设置域,但还没有找到一个对我的所有数据都能一致工作的解决方案。所以我对我的域名进行了硬编码:

if (val == 1) {ydom = [-2,20]}
else if (val == 2) {ydom = [-40,240]}
else if (val == 3) {ydom = [-.5,1.5]}
else if (val == 4) {ydom =  [-.6,.9]}
else if (val == 5) {ydom = [-.6,.6]}
else if (val == 6) {ydom = [-.16,.16]}
else if (val == 7) {ydom = [-.5,3]}
else if (val == 8) {ydom = [-1000000,2000000]}
else if (val == 9) {ydom = [-1000000,2000000]}
else if (val == 10) {ydom = [-4,10]}

这不仅很难看,还意味着任何极值现在要么远高于要么远低于我显示的y轴。

我的问题是,有没有一种方法可以使用D3将显示的值限制在域的最大值/最小值,同时保留实际值(以便工具提示显示实际值而不是显示值(?

我目前正在使用d3.v4。

UPDATE根据下面的答案,我修改了我的线函数(以及圆的"cy"attr函数(:

var line = d3.line()
.x(d => x(d.year))
.y(function(d) {
val = document.querySelector('input[name="button"]:checked').value;
if (val == 1) { if (d.mval < -2) {return y(-2)} else if (d.mval > 20) {return y(20)} else {return y(d.mval)}}
else if (val == 2) { if (d.mval < -40) {return y(-40)} else if (d.mval > 240) {return y(240)} else {return y(d.mval)}}
else if (val == 3) { if (d.mval < -.5) {return y(-.5)} else if (d.mval > 1.5) {return y(1.5)} else {return y(d.mval)}}
else if (val == 4) { if (d.mval < -.6) {return y(-.6)} else if (d.mval > .9) {return y(.9)} else {return y(d.mval)}}
else if (val == 5) { if (d.mval < -.6) {return y(-.6)} else if (d.mval > .6) {return y(.6)} else {return y(d.mval)}}
else if (val == 6) { if (d.mval < -.16) {return y(-.16)} else if (d.mval > .16) {return y(.16)} else {return y(d.mval)}}
else if (val == 7) { if (d.mval < -.5) {return y(-.5)} else if (d.mval > 3) {return y(3)} else {return y(d.mval)}}
else if (val == 8) { if (d.mval < -1000000) {return y(-1000000)} else if (d.mval > 2000000) {return y(2000000)} else {return y(d.mval)}}
else if (val == 9) { if (d.mval < -1000000) {return y(-1000000)} else if (d.mval > 2000000) {return y(2000000)} else {return y(d.mval)}}
else if (val == 10) { if (d.mval < -4) {return y(-4)} else if (d.mval > 10) {return y(10)} else {return y(d.mval)}}
})

此处更新小提琴:https://jsfiddle.net/etonblue/xwbkz98m/23/.正如你在更新的fiddle中看到的,有9个单选按钮。变量";val";标识活动单选按钮,该按钮确定当前活动的域,从而确定要检查的限制。

如果我理解正确的话,我认为你更新的答案会产生更干净的代码。我会设法把它合并起来。

然而,我现在注意到另一个问题,可能需要单独提问,因为我怀疑这与我的更新功能有关。如果单击";年度注册变化%";函数,你可以在图表底部看到两条绿色的线(没有点(,它们显然是";"流动比率";图表啊。它总是有意义的。

您提供的代码与解决方案不太相关。在你的小提琴上工作,解决方案是在你的回调中,你的线和圆的y位置。对于您的线路:

var line = d3.line()
.x(d => x(d.year))
.y(d =>  d.mval > 240 ? y(240) : y(d.mval)) //If mval is over 240 plot 240

同样适用于你的圈子cy:

.attr('cy', d =>  d.mval > 240 ? y(240) : y(d.mval))

一般来说,您可以使用回调:

d => d.mval > y.domain()[1] ? y(y.domain()[1]) : y(d.mval)

我不明白你的设置,

这不仅仅是d3刻度所需的clamp((选项吗?这将停止域-->量程转换超过量程的最小值/最大值。

https://github.com/d3/d3-scale#continuous_clamp

相关内容

最新更新