1

私は D3 を初めて使用し、実際に棒グラフの水平方向のパン オプションを試しています。水平パンニングが完全に機能する次の例を試しましたが、特定の問題が見られました。グラフの特定の境界内に存在するデータに関してパンを制限したいので (水平方向に無限にパンしたくない)、これを手伝ってください。オンラインで入手できる実用的な例はありますか。ありがとうございました。

JS コード:

    var data = [
      {"date":"2011-12-31","num":5},
      {"date":"2012-01-05","num":10},
      {"date":"2012-01-10","num":22},
      {"date":"2012-01-15","num":72},
      {"date":"2012-01-20","num":87},
      {"date":"2012-01-25","num":90}
];


function draw(){

    var location = "#post"
    var month_names = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    var graph_width = 500;
    var graph_height = 200;

    var values = _.pluck(data, 'num');
    var max_val = d3.max(values);
    var v_scale = graph_height / max_val;
    var data_counts = data.length;
    var bar_width = graph_width / data_counts;
    var minDate = new Date(data[0]["date"]);
    var maxDate = new Date(data[data.length - 1]["date"]);

    var y = d3.scale.linear()
        .domain([0, max_val])
        .range([graph_height, 0]);

    console.log(minDate);
    var x = d3.time.scale().domain([minDate, maxDate]).range([0, graph_width]);


    var chart = d3.select(location).append("svg")
        .attr("class", "chart")
        .attr("width", graph_width + 20)
        .attr("height", graph_height + 20).
        call(d3.behavior.zoom().x(x).scaleExtent([1, 8]).on("zoom", zoom));

    var lines = chart.selectAll("line");

    var lines_y = lines
        .data(x.ticks(5))
        .enter().append("line")
        .attr("x1", x)
        .attr("x2", x)
        .attr("y1", function(d) {
        return graph_height - 20 - d;})
        .attr("y2", graph_height)
        .style("stroke", "#ccc");

    var lines_x = lines
        .data(y.ticks(10))
        .enter().append("line")
        .attr("x1", 0)
        .attr("x2", graph_width)
        .attr("y1", y)
        .attr("y2", y)
        .style("stroke", "#ccc");

    xAxis = d3.svg.axis().scale(x);
    yAxis = d3.svg.axis().scale(y).orient("left");

    chart.append("svg:g")
        .attr("class", "xaxis")
        .attr("transform", "translate(0,200)")
        .call(xAxis);

    chart.append("svg:g")
        .attr("class", "yaxis")
        .attr("transform", "translate(25,0)")
        .call(yAxis);

    var rect = chart.selectAll("rect")
        .data(data).enter()
        .append("rect")
        .attr("x", function(d, i) {return x(new Date(d["date"])) + 20;})
        .attr("y", function(d, i) {return graph_height - (d["num"] * v_scale);})
        .attr("width", x(new Date(data[1]["date"])))
        .attr("height", function(d, i) {return d["num"] * v_scale;});

    function zoom() {
        chart.select(".xaxis").call(xAxis);
        chart.select(".yaxis").call(yAxis);
        chart.selectAll(".chart rect").attr("transform", "translate(" + d3.event.translate[0] + ",0)scale(" + d3.event.scale + ", 1)");
    }

    }
draw();
4

2 に答える 2

0

パンニングを制限するには、翻訳を適用する前に翻訳の値を確認します。平行移動の値は、パンしている方向の逆になることに注意してください。つまり、正のx方向にパンすると、平行移動の値はx負になります。

コードは次のようになります。

function zoom() {
    if(d3.event.translate[0] > -100) {
        // translate
    }
}

実際の値 (-100上記) は、実際に必要なものによって異なります。入力ドメインに値を渡して、パンをグラフの端などに制限したい場合があります。

于 2013-04-08T16:17:17.507 に答える