Javascript D3：缩放时出现更新的时域问题

我已经用D3做了一段时间的实验，但我已经走到了死胡同。 在初始化时，我创建了一个svg，其中的轴设置在一些默认数据上

Graph.initiateGraph = function(data){

    Graph.time_extent = d3.extent(data, function(d) { return d.date; });
    Graph.time_scale = d3.time.scale()
        .domain(Graph.time_extent)
        .range([Graph.padding, Graph.w]);

    Graph.value_extent = d3.extent(data, function(d) { return parseInt(d.value); });
    Graph.value_scale = d3.scale.linear()
        .domain(Graph.value_extent)
        .range([Graph.h, Graph.padding]);

    Graph.svg = d3.select("#graph")
        .append("svg:svg")
        .attr("width", Graph.w + Graph.padding)
        .attr("height", Graph.h + Graph.padding)
        .call(d3.behavior.zoom().x(Graph.time_scale).y(Graph.value_scale).on("zoom", Graph.zoom));

    Graph.chart = Graph.svg.append("g")
        .attr("class","chart")
        .attr("pointer-events", "all")
        .attr("clip-path", "url(#clip)");

    Graph.line = d3.svg.line()
        .x(function(d){ return Graph.time_scale(d.date); })
        .y(function(d){ return Graph.value_scale(d.value); })
        .interpolate("linear");

    Graph.time_axis = d3.svg.axis()
        .scale(Graph.time_scale)
        .orient("bottom").ticks(5);

    Graph.value_axis = d3.svg.axis()
        .scale(Graph.value_scale)
        .orient("left").ticks(5);

    Graph.svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + Graph.h + ")")
        .call(Graph.time_axis);

    Graph.svg.append("g")
        .attr("class","y axis")
        .attr("transform","translate(" + Graph.padding + ",0)")
        .call(Graph.value_axis);

}

然后，我有一对输入框，它们实现jquery日历脚本以提供2个日期（开始和结束）。然后用这些日期更新svg图表

$("#date_filter_button").click(function(){

    var start_date = $("#analysis [name='date_start']").datepicker('getDate');
    var end_date = $("#analysis [name='date_end']").datepicker('getDate');

    Graph.time_extent = [start_date.getTime(),end_date.getTime()];
    Graph.time_scale.domain(Graph.time_extent);

    Graph.svg.select(".x.axis").transition().call(Graph.time_axis);
}

在这里，一切都很有魅力。x轴域更改为提供的日期。然后我画了一张图表，效果很好

当我尝试平移/缩放图表时，问题出现了。在第一次平移/缩放时，时间轴将更改为我在初始化时使用的第一个默认值

Graph.zoom = function(){

    var trans = d3.event.translate[0],
        scale = d3.event.scale;

    Graph.svg.select(".x.axis").call(Graph.time_axis);
    Graph.svg.select(".y.axis").call(Graph.value_axis);

}

---

就像zoom函数进入并调用Graph.time-axis时，它使用Graph.time\u范围和/或Graph.time\u比例值的初始值…

您能否提供一个实例，最好是类似的实例？因此我设法解决了这个问题。该图是这样的：初始化没有数据的图表（值轴和时间轴）。此外，您还在图表上添加了缩放功能以平移/缩放图表。用户输入2个日期，以便根据提供的值重新绘制时间轴，然后绘制图表。您还需要使用新的时间值调用svg上的缩放功能，以便使用正确的值更新缩放功能。