Question

我正在尝试为可视化中的SVG元素创建SVG工具提示（简单DIV）。我使用D3 javascript库，并使用内置的D3缩放行为，它可以转换和缩放SVG对象。我想在点击它们时在SVG元素旁边创建工具提示。工具提示应与SVG对象一起移动，但它们不应由mouswheel缩放。而不是我想删除zoom-begin上的所有工具提示，并在缩放结束后重新创建它们。

我让它运转，但我仍然有问题。即使缩放工具提示，也可以计算工具提示的位置。我也可以使用SVG对象在屏幕上移动它们。问题是如果我先用鼠标移动SVG对象，创建工具提示并再次移动SVG对象。然后工具提示会跳转。我也无法在缩放开始时删除它们并在zoom-finished上重新创建。

这是一个显示我的方法的小例子：

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/

编辑：

我设法通过比较容器的当前比例值和zoom-event的比例值来检测滚动/缩放。不确定这是否是最佳方式，但它可以工作，我可以在移动滚轮时删除所有工具提示。在缩放行为结束后，我仍然不知道如何重新创建它们。在移动SVG对象后创建工具提示时仍然存在问题。

在这里更新了JsFiddle http://jsfiddle.net/HzBQg/1/

Answer 1

我解决了我的问题，虽然解决方案并不完美，但却有效。

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/

在翻译和缩放SVG对象后创建它们的工具提示

1 个答案: