Javascript 在NVD3图表中是否可以像在Highcharts中一样使用缩放选项?
我最近开始使用NVD3图表,并且喜欢像Highcharts这样的缩放选项。有可能吗?有一个“带取景器的折线图”示例,它使用了Javascript 在NVD3图表中是否可以像在Highcharts中一样使用缩放选项?,javascript,d3.js,nvd3.js,Javascript,D3.js,Nvd3.js,我最近开始使用NVD3图表,并且喜欢像Highcharts这样的缩放选项。有可能吗?有一个“带取景器的折线图”示例,它使用了nv.models.lineWithFocusChart()。此图表类型在主图表下方显示一个附加的“迷你地图”,可用于缩放和平移图表: 请参阅:您可以将此功能应用于nvd3图表。它不会像Highcharts中那样生成一个可拖动的框来辅助缩放,但它允许通过鼠标滚动进行缩放,如下所示:。您必须从nvd3中删除过渡/延迟,以实现平滑缩放。目前,您可能必须通过更改nvd3源文件手动
nv.models.lineWithFocusChart()
。此图表类型在主图表下方显示一个附加的“迷你地图”,可用于缩放和平移图表:
请参阅:您可以将此功能应用于nvd3图表。它不会像Highcharts中那样生成一个可拖动的框来辅助缩放,但它允许通过鼠标滚动进行缩放,如下所示:。您必须从nvd3中删除过渡/延迟,以实现平滑缩放。目前,您可能必须通过更改nvd3源文件手动完成此操作。对此有一个讨论 这是一本书
我已经更新了小提琴。请您再试一次,让我知道它现在是否适合您。我们有散点图的功能吗?如果没有,我们如何添加它?
function addZoom(options) {
// scaleExtent
var scaleExtent = 10;
// parameters
var yAxis = options.yAxis;
var xAxis = options.xAxis;
var xDomain = options.xDomain || xAxis.scale().domain;
var yDomain = options.yDomain || yAxis.scale().domain;
var redraw = options.redraw;
var svg = options.svg;
var discrete = options.discrete;
// scales
var xScale = xAxis.scale();
var yScale = yAxis.scale();
// min/max boundaries
var x_boundary = xScale.domain().slice();
var y_boundary = yScale.domain().slice();
// create d3 zoom handler
var d3zoom = d3.behavior.zoom();
// fix domain
function fixDomain(domain, boundary) {
if (discrete) {
domain[0] = parseInt(domain[0]);
domain[1] = parseInt(domain[1]);
}
domain[0] = Math.min(Math.max(domain[0], boundary[0]), boundary[1] - boundary[1]/scaleExtent);
domain[1] = Math.max(boundary[0] + boundary[1]/scaleExtent, Math.min(domain[1], boundary[1]));
return domain;
};
// zoom event handler
function zoomed() {
yDomain(fixDomain(yScale.domain(), y_boundary));
xDomain(fixDomain(xScale.domain(), x_boundary));
redraw();
};
// zoom event handler
function unzoomed() {
xDomain(x_boundary);
yDomain(y_boundary);
redraw();
d3zoom.scale(1);
d3zoom.translate([0,0]);
};
// initialize wrapper
d3zoom.x(xScale)
.y(yScale)
.scaleExtent([1, scaleExtent])
.on('zoom', zoomed);
// add handler
svg.call(d3zoom).on('dblclick.zoom', unzoomed);
};
// here chart is your nvd3 model
addZoom({
xAxis : chart.xAxis,
yAxis : chart.yAxis,
yDomain: chart.yDomain,
xDomain: chart.xDomain,
redraw : function() { chart.update() },
svg : svg
});