缩放d3中的双缩放图表的左右轴 [英] Zoom left and right axis for dual scaled chart in d3
本文介绍了缩放d3中的双缩放图表的左右轴的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有使用d3的双尺度折线图,coffescript在下面
I have dual scaled line chart using d3, coffescript is below
# bottom axis
xScale = d3.time.scale().range([0,width]).domain(d3.extent(data, (d) -> d.date))
xAxis = d3.svg.axis().scale(xScale).orient("bottom").ticks(5)
# left axis
yLeftMax = d3.max(data, (d) -> d.price)
yLeftScale = d3.scale.linear().domain([0, yLeftMax]).range([height, 0])
yLeftAxis = d3.svg.axis().scale(yLeftScale).orient("left")
# right axis
yRightMax = d3.max(data, (d) -> d.yoy)
yRightMin = d3.min(data, (d) -> d.yoy)
yRightAbsMax = Math.max(Math.abs(yRightMin), Math.abs(yRightMax))
yRightScale = d3.scale.linear().domain([-yRightAbsMax, yRightAbsMax]).range([height, 0])
yRightAxis = d3.svg.axis().scale(yRightScale).orient("right")
myZoom = ->
canvas.select("._x._axis").call xAxis
#canvas.select(".axisLeft").call yLeftAxis // can't zoom left axis here
canvas.select(".axisRight").call yRightAxis // Zoom right axis
canvas.select(".line1").attr("d", line1(data)) // Zoom left scaled line
canvas.select(".line2").attr("d", line2(data)) // Zoom right scaled line
zoom = d3.behavior.zoom()
.x(xScale) // set xScale for zoom
#.y(yLeftScale) // can't set left yScale for zoom here
.y(yRightScale) // set right yScale for zoom
.scaleExtent([1,20]) # 20x times zoom
.on("zoom", myZoom)
...
问题是,当我使用缩放时,左或右y轴被放大,即我无法获得缩放工作在两个y刻度。
The problem is, when I'm using zoom, either left or right y-axis is zoomed, i.e. I can't get zoom working for both y-scales.
推荐答案
在 myZoom
函数中,可以显式设置 code>
yLeftScale
:
In your myZoom
function, you can explicitly set the domain
of the yLeftScale
:
myZoom = ->
scale = d3.event.scale
translate = d3.event.translate
# Haven't verified these calculations. Is it scale first or translate first?
# See `alternate answer` below for a better approach
yLeftScale.domain([0 + translate[1], yLeftMax / scale + translate[1])
canvas.select("._x._axis").call xAxis
canvas.select(".axisLeft").call yLeftAxis # can't zoom left axis here
canvas.select(".axisRight").call yRightAxis # Zoom right axis
canvas.select(".line1").attr("d", line1(data)) # Zoom left scaled line
canvas.select(".line2").attr("d", line2(data)) # Zoom right scaled line
并且替代解决方案有两个单独的缩放行为,并控制另一个 zoom
行为,而不是手动更新 domains
。我发现这更健壮,虽然有点更冗长。
And alternate solution is having two separate zoom behaviors and controlling the other zoom
behavior instead of manually updating the domains
. I find this to be more robust though a bit more verbose.
zoomLeft = d3.behavior.zoom()
.x(xScale) # set xScale for zoom
.y(yLeftScale) # can't set left yScale for zoom here
.scaleExtent([1,20]) # 20x times zoom
和 myZoom
zoomLeft
的缩放
和 translate
:
myZoom = ->
zoomLeft.scale(zoom.scale()).translate(zoom.translate())
canvas.select("._x._axis").call xAxis
canvas.select(".axisLeft").call yLeftAxis # can't zoom left axis here
canvas.select(".axisRight").call yRightAxis # Zoom right axis
canvas.select(".line1").attr("d", line1(data)) # Zoom left scaled line
canvas.select(".line2").attr("d", line2(data)) # Zoom right scaled line
这篇关于缩放d3中的双缩放图表的左右轴的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文