Question

我一直在试验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);

}

当缩放函数进入并调用Graph.time轴时，它使用Graph.time_extent和/或Graph.time_scale值的初始值......

D3：缩放时更新时域的问题

0 个答案: