v3からv4への移行 - ツールチップがd3に表示されない

Question

this参照を使用して散布図を作成しました。コードはv3ではうまく機能しましたが、v4、ツールチップ、x軸、y軸に変更された後は表示されませんでした。

私はPlunkerを作成しました。誰かが私に何が間違っているのかを教えてもらえれば嬉しいです。

function showTooltip (d, i) { 

    //Save the chosen circle (so not the voronoi) 
    var element = d3.selectAll(".countries."+d.CountryCode); 

    //Define and show the tooltip 
    $(element).popover({ 
     placement: 'auto top', 
     container: '#chart', 
     trigger: 'manual', 
     html : true, 
     content: function() { 
      return "<span style='font-size: 12px; text-align: center;'>" + "<span>" + "Speaker: " + "</span>" + d.Speaker + "\n" 
      + "<span>" + "Duration: " + "</span>" + Math.round(d.Duration) + "\n" +"</span>"; } 
    }); 
    $(element).popover('show'); 

    //Make chosen circle more visible 
    element.style("opacity", 1) 
     .style("stroke-width", 6); 

更新：

ThisはV4のD3でこの散布図のための修正版です。私はLaryの助けを借りてそれを修正しました。

Answer 1

用：

x軸とy軸は単に削除

を表示されない：

.axis .domain { 
     display: none; 
    } 

をスタイル

のため：

ツールチップ、showtooltip関数内の行は

変更：

var element = d3.select(".countries."+d.CountryCode); 

    //Define and show the tooltip 
    $(element.node()).popover({ 
     placement: 'auto top', 
     container: '#chart', 
     trigger: 'manual', 
     html : true, 
     content: function() { 
      return "<span style='font-size: 12px; text-align: center;'>" + "<span>" + "Speaker: " + "</span>" + d.Speaker + "\n" 
      + "<span>" + "Duration: " + "</span>" + Math.round(d.Duration) + "\n" +"</span>"; } 
    }); 
    $(element.node()).popover('show'); 

//Make chosen circle more visible 
element.style("opacity", 1) 
    .style("stroke-width", 6); 

//Append lines to bubbles that will be used to show the precise data points 
//vertical line 
d3.select(".chordWrapper").append("g") 
    .attr("class", "guide") 
    .append("line") 
     .attr("x1", element.attr("cx")) 
     .attr("x2", element.attr("cx")) 
     .attr("y1", +element.attr("cy")) 
     .attr("y2", (height)) 
     .style("stroke", element.style("fill")) 
     .style("opacity", 0) 
     .style("pointer-events", "none") 
     .transition().duration(200) 
     .style("opacity", 0.5); 
//horizontal line 
d3.select(".chordWrapper").append("g") 
    .attr("class", "guide") 
    .append("line") 
     .attr("x1", +element.attr("cx")) 
     .attr("x2", 0) 
     .attr("y1", element.attr("cy")) 
     .attr("y2", element.attr("cy")) 
     .style("stroke", element.style("fill")) 
     .style("opacity", 0) 
     .style("pointer-events", "none") 
     .transition().duration(200) 
     .style("opacity", 0.5); 

および追加：

.on("mouseover", showTooltip) 
.on("mouseout", removeTooltip); 

をサークルに（script.jsは、84行目）

を取りますここをクリックしてください：

https://embed.plnkr.co/86jdbWgHtABY95ZEv9SE/