你们中的大多数人可能不记得我之前的问题,圆圈没有正确更新具有两级嵌套数据的多行图表。我设法解决了我的问题(尽管我仍然不相信我提出的是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