1

我一直在尝试 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-axis 时，它使用 Graph.time_extent 和/或 Graph.time_scale 值的初始值......

4

0 回答 0