9

任意の期間にズームインできる時間スケールの棒グラフを作成しようとしています。x軸（タイムスケール）のズーム機能を作成できましたが、データ（この場合はrects）が軸に沿ってズームしません。

グラフの簡略版を次に示します。http：//jsfiddle.net/gorkem/Mf457/5/embedded/result/ご覧の とおり、x軸にズームインできますが、バーはズームしません。

そしてここにjfiddleリンクがあります：http：//jsfiddle.net/gorkem/Mf457/6/

var y = d3.scale.linear().domain([0, max_val]).range([graph_height, 0]);
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,300)")
    .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;});

rect.call(d3.behavior.zoom().x(x).scaleExtent([1, 8]).on("zoom", zoom));

function zoom() {
    chart.select(".xaxis").call(xAxis);
    chart.select(".yaxis").call(yAxis);
}

}

ズーム機能をバー（長方形）で有効にするには、もっと機能を追加する必要があると思います。助けていただければ幸いです。

4

2 に答える 2

8

'selectAll'を使用して、各バーにそれぞれスケーリングと変換を適用し、スケールと変換の両方をx軸のみに制限しました。

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)");
}

これは、単一のパス要素でも同様に機能します。これは、私があなたの質問に出くわしたときに理解しようとしていたことです。

于 2012-07-25T15:43:32.593 に答える
0

私は同じことを疑問に思っているので、少なくともあなたが良い仲間にいることを知っています。これが私の現在のアプローチです。まず第一に、私はあなたのコードからプロットを生成することができず、リンクは私を有用なものに送りません-チャートはレンダリングされません。だから私はあなたの特定の問題を助けることはできません。ただし、ここにズーム可能な長方形がある例があります：http: //bl.ocks.org/1962173。私は現在それを調べて、不要な要素を削除して、それを機能させることができるかどうかを確認しています。うまくいけば、これが役立ちます！

于 2012-06-21T17:41:42.530 に答える