d3バージョン4ドラッグ＆ズームアップデート

Question

以下のコードはv3では動作しますが、v4では動作しません。私はズームイベントから動作を取り除こうとしましたが、それでも動作しません。私はまた、この行に問題があることを発見しました。 transMat = circle [0] [0] .getCTM（）バージョン4で。どんな提案もありがとうございます。

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() { 
    var scrolling = false 
    //console.log('event scale', d3.event.scale, 'container scale', container[0][0].getCTM().d) 
    if ((d3.event.scale).toFixed(4) != (container[0][0].getCTM().d).toFixed(4)) { 
     console.log('scrolling') 
     scrolling = true 
    } 
    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)" 
     } 
    } 
}; 

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')) 

    //x = x + (scale * radius) + margin 
    //y = y + (scale * radius/2) + margin 
    //console.log("translate(" + x + "px," + y + "px)") 

    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') 
     .style('-webkit-transform', "translate(" + 0 + "px," + 0 + "px)") 
     .html('<- This is tooltip.'); 

} 

Answer 1

D3 v4では、選択no longerはオブジェクトの配列です。したがって、circle[0][0]を使用して最初のノードにアクセスすることはできません。代わりにcircle.node()を使用してください。または、選択に含まれるすべてのノードを検索する場合は、circle.nodes()を使用します。