我实现了图表以显示一段时间内的一些财务数据，x轴包含javascript日期，而y轴编号。图表必须提供缩放和平移功能。我将x轴设置为最大可用时间，例如：
var data = [
[{'x':'2017-01-02','y':0},{'x':'2017-02-03','y':5.0},{'x':'2017-03-04','y':10},{'x':'2017-04-05','y':0},{'x':'2017-05-06','y':6},{'x':'2017-06-07','y':11},{'x':'2017-07-08','y':9},{'x':'2017-08-09','y':4},{'x':'2017-09-10','y':11},{'x':'2017-10-11','y':2}],
[{'x':'2017-01-02','y':1},{'x':'2017-02-03','y':6.0},{'x':'2017-03-04','y':11},{'x':'2017-04-05','y':1},{'x':'2017-05-06','y':7},{'x':'2017-06-07','y':12},{'x':'2017-07-08','y':8},{'x':'2017-08-09','y':3},{'x':'2017-09-10','y':13},{'x':'2017-10-11','y':3}]
];
var json = JSON.parse('[[{"x":"2017-08-22T20:27:53.181+0200","y":4.0},{"x":"2017-09-01T20:27:53.181+0200","y":9.0},{"x":"2017-09-11T20:27:53.181+0200","y":15.0},{"x":"2017-09-21T20:27:53.181+0200","y":6.0},{"x":"2017-10-01T20:27:53.181+02:00","y":13.0},{"x":"2017-10-11T20:27:53.181","y":10.0},{"x":"2017-10-21T20:27:53.181","y":1.0},{"x":"2017-10-31T20:27:53.181","y":13.0},{"x":"2017-11-10T20:27:53.181","y":2.0},{"x":"2017-11-20T20:27:53.181","y":13.0},{"x":"2017-11-30T20:27:53.181","y":2.0},{"x":"2017-12-10T20:27:53.181","y":14.0},{"x":"2017-12-20T20:27:53.181","y":15.0},{"x":"2017-12-30T20:27:53.181","y":11.0},{"x":"2018-01-09T20:27:53.181","y":5.0},{"x":"2018-01-19T20:27:53.181","y":11.0},{"x":"2018-01-29T20:27:53.181","y":5.0},{"x":"2018-02-08T20:27:53.181","y":2.0},{"x":"2018-02-18T20:27:53.181","y":4.0},{"x":"2018-02-28T20:27:53.181","y":3.0},{"x":"2018-03-10T20:27:53.181","y":2.0},{"x":"2018-03-20T20:27:53.181","y":10.0},{"x":"2018-03-30T20:27:53.181","y":15.0},{"x":"2018-04-09T20:27:53.181","y":3.0},{"x":"2018-04-19T20:27:53.181","y":2.0},{"x":"2018-04-29T20:27:53.181","y":11.0},{"x":"2018-05-09T20:27:53.181","y":7.0},{"x":"2018-05-19T20:27:53.181","y":13.0},{"x":"2018-05-29T20:27:53.181","y":8.0},{"x":"2018-06-08T20:27:53.181","y":1.0},{"x":"2018-06-18T20:27:53.181","y":4.0},{"x":"2018-06-28T20:27:53.181","y":10.0},{"x":"2018-07-08T20:27:53.181","y":13.0},{"x":"2018-07-18T20:27:53.181","y":13.0},{"x":"2018-07-28T20:27:53.181","y":12.0},{"x":"2018-08-07T20:27:53.181","y":13.0},{"x":"2018-08-17T20:27:53.181","y":13.0},{"x":"2018-08-27T20:27:53.181","y":1.0},{"x":"2018-09-06T20:27:53.181","y":8.0},{"x":"2018-09-16T20:27:53.181","y":14.0},{"x":"2018-09-26T20:27:53.181","y":7.0},{"x":"2018-10-06T20:27:53.181","y":9.0},{"x":"2018-10-16T20:27:53.181","y":15.0},{"x":"2018-10-26T20:27:53.181","y":15.0},{"x":"2018-11-05T20:27:53.181","y":11.0},{"x":"2018-11-15T20:27:53.181","y":13.0},{"x":"2018-11-25T20:27:53.181","y":9.0},{"x":"2018-12-05T20:27:53.181","y":5.0},{"x":"2018-12-15T20:27:53.181","y":5.0},{"x":"2018-12-25T20:27:53.181","y":6.0}],[{"x":"2017-08-22T20:27:53.181","y":8.0},{"x":"2017-09-01T20:27:53.181","y":13.0},{"x":"2017-09-11T20:27:53.181","y":15.0},{"x":"2017-09-21T20:27:53.181","y":11.0},{"x":"2017-10-01T20:27:53.181","y":12.0},{"x":"2017-10-11T20:27:53.181","y":10.0},{"x":"2017-10-21T20:27:53.181","y":2.0},{"x":"2017-10-31T20:27:53.181","y":10.0},{"x":"2017-11-10T20:27:53.181","y":12.0},{"x":"2017-11-20T20:27:53.181","y":6.0},{"x":"2017-11-30T20:27:53.181","y":10.0},{"x":"2017-12-10T20:27:53.181","y":2.0},{"x":"2017-12-20T20:27:53.181","y":3.0},{"x":"2017-12-30T20:27:53.181","y":10.0},{"x":"2018-01-09T20:27:53.181","y":12.0},{"x":"2018-01-19T20:27:53.181","y":12.0},{"x":"2018-01-29T20:27:53.181","y":6.0},{"x":"2018-02-08T20:27:53.181","y":2.0},{"x":"2018-02-18T20:27:53.181","y":7.0},{"x":"2018-02-28T20:27:53.181","y":1.0},{"x":"2018-03-10T20:27:53.181","y":10.0},{"x":"2018-03-20T20:27:53.181","y":4.0},{"x":"2018-03-30T20:27:53.181","y":14.0},{"x":"2018-04-09T20:27:53.181","y":15.0},{"x":"2018-04-19T20:27:53.181","y":5.0},{"x":"2018-04-29T20:27:53.181","y":14.0},{"x":"2018-05-09T20:27:53.181","y":4.0},{"x":"2018-05-19T20:27:53.181","y":3.0},{"x":"2018-05-29T20:27:53.181","y":7.0},{"x":"2018-06-08T20:27:53.181","y":1.0},{"x":"2018-06-18T20:27:53.181","y":14.0},{"x":"2018-06-28T20:27:53.181","y":2.0},{"x":"2018-07-08T20:27:53.181","y":14.0},{"x":"2018-07-18T20:27:53.181","y":11.0},{"x":"2018-07-28T20:27:53.181","y":12.0},{"x":"2018-08-07T20:27:53.181","y":3.0},{"x":"2018-08-17T20:27:53.181","y":13.0},{"x":"2018-08-27T20:27:53.181","y":6.0},{"x":"2018-09-06T20:27:53.181","y":3.0},{"x":"2018-09-16T20:27:53.181","y":11.0},{"x":"2018-09-26T20:27:53.181","y":3.0},{"x":"2018-10-06T20:27:53.181","y":15.0},{"x":"2018-10-16T20:27:53.181","y":13.0},{"x":"2018-10-26T20:27:53.181","y":9.0},{"x":"2018-11-05T20:27:53.181","y":2.0},{"x":"2018-11-15T20:27:53.181","y":14.0},{"x":"2018-11-25T20:27:53.181","y":15.0},{"x":"2018-12-05T20:27:53.181","y":4.0},{"x":"2018-12-15T20:27:53.181","y":2.0},{"x":"2018-12-25T20:27:53.181","y":5.0}]]');
var a = jsonToArray(json);
var parseDate = d3.time.format("%Y-%m-%d").parse;
data.forEach(function(d) {
d.forEach(function(d2) {
d2.x = parseDate(d2.x);
});
});
var colors = [
'steelblue',
'green'
]
var pWidth = document.getElementById('chart1').offsetWidth;
var margin = {top: 20, right: 30, bottom: 30, left: 50},
width = pWidth - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.time.scale()
.domain([new Date('2016-01-01T00:00:00.000+02:00'), new Date('2018-10-01T00:00:00.000+02:00')])
.range([0, width]);
var y = d3.scale.linear()
.domain([-1, 16])
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.tickSize(-height)
.tickPadding(10)
.tickSubdivide(true)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.tickPadding(10)
.tickSize(-width)
.tickSubdivide(true)
.orient("left");
var zoom = d3.behavior.zoom()
.x(x)
.scaleExtent([1, Infinity])
.on("zoom", zoomed);
var svg = d3.select("#chart1").append("svg")
.call(zoom)
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
svg.append("g")
.attr("class", "y axis")
.append("text")
.attr("class", "axis-label")
.attr("transform", "rotate(-90)")
.attr("y", (-margin.left) + 10)
.attr("x", -height/2)
.text('Axis Label');
svg.append("clipPath")
.attr("id", "clip")
.append("rect")
.attr("width", width)
.attr("height", height);
var line = d3.svg.line()
.x(function(d) { return x(d.x); })
.y(function(d) { return y(d.y); });
svg.selectAll('.line')
.data(data)
.enter()
.append("path")
.attr("class", "line")
.attr("clip-path", "url(#clip)")
.attr('stroke', function(d,i){
return colors[i%colors.length];
})
.attr("d", line);
var points = svg.selectAll('.dots')
.data(data)
.enter()
.append("g")
.attr("class", "dots")
.attr("clip-path", "url(#clip)");
function zoomed() {
svg.select(".x.axis").call(xAxis);
svg.selectAll('path.line').attr('d', line);
var arr = [[]];
for ( var i = 0; i < 2; i++ ) {
arr[i] = new Array();
for ( var j = 0; j < 50; j++ ) {
arr[i][j] = {'x': addDays(x.domain()[0], 10*j), 'y':Math.floor((Math.random() * 15) + 1)};
}
}
svg.selectAll('.line')
.data(arr)
.enter()
.append("path")
.attr("class", "line")
.attr("clip-path", "url(#clip)")
.attr('stroke', function(d,i){
return colors[i%colors.length];
})
.attr("d", line);
}
function addDays(startDate,numberOfDays)
{
var returnDate = new Date(
startDate.getFullYear(),
startDate.getMonth(),
startDate.getDate()+numberOfDays,
startDate.getHours(),
startDate.getMinutes(),
startDate.getSeconds());
return returnDate;
}
function jsonToArray(json) {
var result = new Array();
for(var i in json) {
var arr = new Array();
for(var j in json[i]) {
arr.push({'x':new Date(json[i][j].x), 'y':json[i][j].y});
}
result.push(arr);
}
return result;
}
}
，但是加载图表时的默认时间段必须为当前日期-一个月前。当我绘制此时间段的路径时，图表会在x轴上将其显示为最大时间段。如何以编程方式放大默认时间段（当前日期-一个月前），以便以后可以同时放大和缩小？ 或者，我可以在加载图表时设置默认期限（当前日期-一个月前），但是如何缩小鼠标滚轮以使其更宽泛呢？