缩放左轴和右轴的双重缩放图表在d3
Zoom left and right axis for dual scaled chart in d3
我有双缩放折线图使用d3, coffescript在下面
# 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尺度
在myZoom
函数中,可以显式地设置yLeftScale
的domain
:
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
。我觉得这样更健壮,虽然有点冗长。
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
的scale
和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.JS向rect添加缩放和列表项
- 当我在节点上拖动鼠标时,我如何防止使用d3.ehavior.zoom().on(“缩放”,重绘)
- 在d3中应用缩放平移和轴重缩放
- D3.js:缩放svg时错过刻度线
- 如果缩放为最大/最小,如何忽略d3.js缩放行为
- d3.js:在强制布局中使用缩放时,将禁用拖动
- D3缩放不起作用
- d3.event.scale 包含用于触摸设备的缩放 NaN
- D3.js:调整缩放示例以使用折线图
- d3.js带缩放的多线图:线错误
- 如何在D3中获得可缩放Icicle布局中文本标签的旋转
- D3.js在画布和svg中映射缩放行为
- 无法缩放D3组条形图
- 缩放 D3 力布局链接标记上的箭头
- 移动节点时如何停止平移?也限制缩放?D3.
- 如何缩放 D3 气泡图中的文本
- 缩放d3's直方图x域导致“;<的负值无效;rect>属性“;错误
- 缩放D3力向图不使用鼠标滚轮
- 可缩放d3折线图有消失的数据
- 缩放D3条形图到容器大小