1

ビジュアライゼーションで SVG 要素の SVG ツールチップ (単純な DIV) を作成しようとしています。私は D3 JavaScript ライブラリを使用し、組み込みの D3 ズーム動作を使用して、SVG オブジェクトを変換およびスケーリングします。SVG 要素をクリックすると、そのすぐ横にツールチップを作成したいと思います。ツールチップは SVG オブジェクトと一緒に移動する必要がありますが、マウスホイールでスケーリングしないでください。その代わりに、zoom-begin のすべてのツールチップを削除し、ズームが終わった後にそれらを再作成したいと思います。

うまくいきましたが、まだ問題があります。ツールチップの位置は、スケーリングされていても問題なく計算されます。また、SVG オブジェクトを使用して画面に沿って移動することもできます。問題は、最初にマウスで SVG オブジェクトを移動し、ツールチップを作成して、SVG オブジェクトをもう一度移動することです。ツールチップがジャンプします。また、ズーム開始時にそれらを削除し、ズーム終了時に再作成することもできません。

ここに私のアプローチを示す小さな例があります:

var tooltipCounter = 0;

var  svgElement = d3.select('body')
    .append("svg:svg")
    .attr('width', '100%')
    .attr('height', '100%');

var container = svgElement.append('svg:g');

var circle = container.append('svg:circle')
    //.attr('cx', 100)
    //.attr('cy', 100)
    .attr('transform', 'translate(100,100)')
    .attr('r', 30)
    .attr('fill', 'red')
    .on('click', createTooltip);

svgElement.call(d3.behavior.zoom().on('zoom', redrawOnZoom));

 function redrawOnZoom(){
    container.attr('transform', 'translate(' + d3.event.translate + ')' + ' scale(' +         d3.event.scale + ')')
    var tooltips = $("[id$=tooltip] ");
    for (var i=0; i<tooltips.length; i++) {
        var tooltip = tooltips[i];
        tooltip.style['-webkit-transform'] = "translate(" + d3.event.translate[0] + "px," +  d3.event.translate[1] + "px)"
    }
};

function createTooltip(){
    tooltipCounter ++
    var tooltipId = tooltipCounter + '_tooltip'
    // get the transformation matrix of the circle
    var transMat = circle[0][0].getCTM();
    var x = transMat.e;
    var y = transMat.f;
    var scale = transMat.d; 
    var radius = parseInt(circle.attr('r'))

    var margin = parseInt(d3.select('body').style('margin'))

    var tooltip = d3.select('body').append('xhtml:div')
        .attr('id', tooltipId)
        .style('position', 'absolute')
        .style('background', 'gray')
        .style('left', x + (scale * radius) + margin + 'px')     
        .style('top', y + (scale * radius/2) + margin + 'px')
        .html('<- This is tooltip.');

}

ここに動作する JsFiddle コードがあります: http://jsfiddle.net/HzBQg/

編集 ：

コンテナの現在のスケール値をズームイベントのスケール値と比較することで、スクロール/スケーリングを検出できました。これが最善の方法かどうかはわかりませんが、機能し、スクロール ホイールを動かすとすべてのツールチップを削除できます。ズーム動作が終わった後、それらを再作成する方法はまだわかりません。また、SVG オブジェクトを移動した後にツールチップを作成するときに、まだ問題があります。

ここでJsFiddleを更新しましたhttp://jsfiddle.net/HzBQg/1/

4

1 に答える 1

2

解決策は完璧ではありませんが、問題を解決しました。

var dx = d3.event.translate[0] - container[0][0].getCTM().e;
var dy = d3.event.translate[1] - container[0][0].getCTM().f;

container.attr('transform', 'translate(' + d3.event.translate + ')' + ' scale(' + d3.event.scale + ')')
var tooltips = $("[id$=tooltip] ");
    for (var i=0; i<tooltips.length; i++) {
        var tooltip = tooltips[i];
        if (scrolling){
            tooltip.parentNode.removeChild(tooltip)
        }
        else{
            tooltipTransMat = $('#'+tooltip.id).css("-webkit-transform").match(/(-?[0-9\.]+)/g);
            tooltip.style['-webkit-transform'] = "translate(" + (parseFloat(tooltipTransMat[4])+dx) + "px," + (parseFloat(tooltipTransMat[5])+dy) + "px)"
        }
    }

ここで実際にそれを見ることができます：http://jsfiddle.net/HzBQg/3/

于 2013-07-30T09:07:53.520 に答える