javascript - 在 d3 图表上拖动时仅更新最后一个 Y 轴
问题描述
我的图表有多个具有不同域的 Y 轴。
当我在图表上拖动时,只有最后一个 y 轴正在更新。
我添加了每个 y 轴,如下所示;
addYAxis(data, tag) { // tag is for index for each y-axis e.g: 0, 1, 2
const yScale = d3.scale.linear()
.domain([0, this.innerHeight])
.range([this.innerHeight, 0]);
const yAxis = d3.svg.axis()
.scale(yScale)
.orient(tag ? 'right' : 'left')
.tickSize(tag ? this.innerWidth + 50 * (tag - 1) : -this.innerWidth);
const yAxisElement = this.g.append('g')
.attr('class', 'y axis')
.call(yAxis);
this.yAxisList.push({yScale, yAxis, yAxisElement});
}
这是每个轴的缩放列表。
this.zoom.push(d3.behavior.zoom()
.x(this.xScale)
.y(this.yAxisList[tag].yScale) // when I replace [tag] with [0], then only first axis is being updated.
.scaleExtent([.5, 10])
.scale(this.currentZoom)
.translate(this.currentPan)
.on('zoom', () => this.zoomed(tag))
.on('zoomend', () => {
setTimeout(() => { this.zooming = false; }, 10);
}));
this.g.call(this.zoom[tag]) // when I replace [tag] with [0], then only first axis is being updated.
.on('dblclick.zoom', null);
并像下面这样更新它们;
updateYAxis() {
this.yAxisList.forEach(({yAxisElement, yAxis}) => yAxisElement.call(yAxis));
}
此图表的结构:
在图表上拖动时如何更新所有 Y 轴?
解决方案
这里,
.on('zoom', () => this.zoomed(tag))
您只更新了当前缩放,但也应该使用当前缩放值更新其他缩放对象。
.on('zoom', () => {
this.zoom.forEach((zoom, t) => {
zoom.scale(this.zoom[tag].scale());
zoom.translate(this.zoom[tag].translate());
this.zoomed(t);
});
})
推荐阅读
- javascript - 为什么我不能将某个 URL 放入 Chrome 扩展 JSON 中?
- javascript - google-apps-script 无法读取数组值 ("typeError: "cannot read property "1" )
- python - 如何刷新 Python TKINTER 选项卡中的内容?
- podman - podman.sock: connect: 使用 podman pull image 时没有这样的文件或目录
- python - 在 Python 上调用 C 函数只打印第一个字符
- r - 提取所有成对变量的 p 值和 r 值
- python - 无法卸载 Anaconda
- python - 我在这个接力计划计划中缺少什么?
- mysql - 查询 DISCRETE DECADE 列表的记录数
- javascript - 获取我的金额列的值并将其传递给我的文本框。(代码点火器)