Javascript 使用D3缩放时更新数据并作出反应
我用D3和React绘制了一个简单的折线图,带有缩放和平移行为。 我需要使数据相对于实际缩放的第一个值 例如,如果我的数据集Y值为[0、2%、3%和4%],并且我当前正在查看最后3个值,则它应该绘制[0、1.02%、2.04%] 我试图保留原始数据集的副本,并在缩放时更新viewportDataset:Javascript 使用D3缩放时更新数据并作出反应,javascript,d3.js,reactjs,Javascript,D3.js,Reactjs,我用D3和React绘制了一个简单的折线图,带有缩放和平移行为。 我需要使数据相对于实际缩放的第一个值 例如,如果我的数据集Y值为[0、2%、3%和4%],并且我当前正在查看最后3个值,则它应该绘制[0、1.02%、2.04%] 我试图保留原始数据集的副本,并在缩放时更新viewportDataset: _onZoom (zoom) { let state = this.state, data = state.data, viewportData = [],
_onZoom (zoom) {
let state = this.state,
data = state.data,
viewportData = [],
filteredData,
y = state.y,
x = state.x,
minDate = d3.min(data, d => d.date),
maxDate = d3.max(data, d => d.date),
xZoom, yExtent, yDiff;
if (x.domain()[0] < minDate) {
xZoom = zoom.translate()[0] - x(minDate) + x.range()[0];
zoom.translate([xZoom, 0]);
}
else if (x.domain()[1] > maxDate) {
xZoom = zoom.translate()[0] - x(maxDate) + x.range()[1];
zoom.translate([xZoom, 0]);
}
filteredData = data.filter((d, i) => {
if ((d.date >= x.domain()[0]) && (d.date <= x.domain()[1])) {
return [d.daily, d.accumulated, d.dailyRelative];
}
});
let factor = filteredData[0].dailyRelative;
filteredData.map(d => {
d.dailyRelative = d.dailyRelative / factor;
viewportData.push(d);
});
y.domain(d3.extent(filteredData, d => d.dailyRelative));
this.setState({ y, viewportData });
}
这种方法不起作用。
我想我的更新模式做得不对。
我如何实现这种行为?
我把我的工作表移植到一支笔中,我在缩放事件后更新了数据,duh 不是我想要的那种行为,但它起作用了
_onZoomend () {
/* ... */
chart.select('g.data path.line')
.transition()
.attr('d', d => this._line(d, factor));
},
我在缩放事件后更新了数据 不是我想要的那种行为,但它起作用了
_onZoomend () {
/* ... */
chart.select('g.data path.line')
.transition()
.attr('d', d => this._line(d, factor));
},