在转换和缩放SVG对象后为其创建工具提示

我正在尝试为可视化中的SVG元素创建SVG工具提示（简单div）。我使用D3JavaScript库和内置的D3缩放行为，它转换和缩放SVG对象。我想在单击SVG元素时在它们旁边创建工具提示。工具提示应与SVG对象一起移动，但不应通过鼠标滚轮进行缩放。取而代之的是，我想删除缩放开始时的所有工具提示，并在缩放结束后重新创建它们

我让它工作，但我仍然有问题。工具提示的位置计算为“确定”，即使它们已缩放。我还可以使用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.');

}

var-tooltipCounter=0；
var svgElement=d3.select（'body'）
.append（“svg:svg”）
.attr（'width'，'100%”）
.attr（‘高度’、‘100%’）；
var container=svgElement.append（'svg:g'）；
var circle=container.append（'svg:circle'）
//.attr（'cx'，100）
//.attr（'cy'，100）
.attr（'transform'，'translate（100100）'
.attr（'r'，30）
.attr（'fill'，'red'）
.on（'单击'，创建工具提示）；
调用（d3.behavior.zoom（）.on（'zoom'，redrawOnZoom））；
函数redrawOnZoom（）{
container.attr（'transform'，'translate（'+d3.event.translate++'），'+scale（'+d3.event.scale++'））
变量工具提示=$（“[id$=工具提示]”）；
对于（var i=0；i我解决了我的问题，尽管这个解决方案并不完美，但仍然有效

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

var dx=d3.event.translate[0]-container[0][0].getCTM（）.e；
var dy=d3.event.translate[1]-容器[0][0].getCTM（）.f；
container.attr（'transform'，'translate（'+d3.event.translate++'），'+scale（'+d3.event.scale++'））
变量工具提示=$（“[id$=工具提示]”）；
对于（var i=0；i