5

私の index.html には、svg ビューボックスがあります。

<svg viewBox = "0 0 2000 2000" version = "1.1">
</svg>

作成した svg 楕円をアニメーション化して、楕円をクリックすると特定の y ポイントに垂直に移動し、TOP と呼び、もう一度クリックすると BOTTOM と呼ばれる元の位置に戻ります。現在、ある程度機能する次のコードを使用しています。

var testFlag = 0;    
d3.select("#ellipseTest").on("click", function(){
if (testFlag == 0){
  d3.select(this)
      .attr("transform", "translate(0,0)")
      .transition()
        .duration(450)
        .ease("in-out")
        .attr("transform", "translate(0,-650)")
    testFlag = 1;
}else{
 d3.select(this)
      .attr("transform", "translate(0,-650)")
      .transition()
        .duration(450)
        .ease("in-out")
        .attr("transform", "translate(0,0)")
testFlag = 0;
}
});

ただし、問題は、楕円をポイント TOP までドラッグ可能にし、ポイント BOTTOM までドラッグできるようにしたことです。したがって、楕円を TOP と BOTTOM の中間にドラッグしてから楕円をクリックすると、 TOP に達したときに停止するのではなく、TOP の上で垂直にアニメーション化されます (下にアニメーション化するときは BOTTOM も同様です)。これは、transform translate メソッドがどのように機能するかの結果のようです。マウスをクリックした場所 (または、楕円が現在位置している場所) に対して楕円が移動する量を動的に返す関数を作成すれば、これを解決できると思います。問題は、ビューボックスに対する要素の現在の y 位置を取得する方法がわからないことです。むしろ、ページ全体に対する位置しか取得できません。

クリックの位置を取得するために使用している不完全なコードは次のとおりです。

var svg2 = document.getElementsByTagName('svg')[0];
var pt = svg2.createSVGPoint();
document.documentElement.addEventListener('click',function(evt){    
    pt.x = evt.clientX;
    pt.y = evt.clientY;
    console.log('Position is.... ' + pt.y);
},false);

楕円をドラッグ可能にするための作業コードは次のとおりです。

//These points are all relative to the viewbox
var lx1 = -500;
var ly1 = 1450;
var lx2 = -500;
var ly2 = 800;
function restrict(mouse){ //Y position of the mouse 
    var x;
    if ( (mouse < ly1) && (mouse > ly2) ) {
        x = mouse;
    }else if (mouse > ly1){
        x = ly1;
    }else if (mouse < ly2) {
        x = ly2;
    }
    return x;
}


var drag = d3.behavior.drag()
    .on("drag", function(d) {
      var mx = d3.mouse(this)[0];
      var my = d3.mouse(this)[1];


      d3.select("#ellipseTest")
        .attr({
          cx: lx2,
          cy: restrict(d3.mouse(this)[1])
        });
    })
4

1 に答える 1

3

変形の代わりにアニメーションcy...

var testFlag = 0;    
d3.select("#ellipseTest").on("click", function(){
if (testFlag == 0){
  d3.select(this)
      .transition()
        .duration(450)
        .ease("in-out")
        .attr("cy", 0)
    testFlag = 1;
}else{
 d3.select(this)
      .transition()
        .duration(450)
        .ease("in-out")
        .attr("cy", 650)
testFlag = 0;
}
});
于 2012-10-03T07:07:16.440 に答える