4

http://jsfiddle.net/HF57g/は、タイムラインに配置された単一のイベント（青い長方形）の例です。タイムラインを拡大すると、x軸上のrectの配置が、軸上の目盛りと調和して変化します。しかし同時に、rectは水平方向にスケーリングされます。

コードの次のセクションを変更した場合

svg.selectAll(".item").attr("transform", "translate(" + d3.event.translate[0]+", 0)scale(" + d3.event.scale+", 1)");

に

svg.selectAll(".item").attr("transform", "translate(" + d3.event.translate[0]+", 0)scale(1, 1)");

http://jsfiddle.net/HF57g/1/のように、水平スケーリングを無効にすると、ズームイン/ズームアウト中に、四角形の位置が軸よりもはるかに大きく変化します。

他の関連する形状を拡大縮小せずにtime.scaleを拡大/縮小するにはどうすればよいですか？

4

1 に答える 1

6

scale（x）によって返される新しい位置に応じて、rectsの場所を再配置する更新関数を追加することになりました。

function update_events(){
    return svg.selectAll("rect.item")
        .attr("x", function(d){return scale(d);})    
}

最終バージョンは次のとおりです：http：//jsfiddle.net/HF57g/2/

于 2013-03-22T14:26:00.653 に答える