D3.jsレーダーチャートのツールチップ

Question

D3.jsレーダーチャートの例であるthisに基づいて、より高度なタイプのツールチップを作成しようとしています。ちょうど数字の代わりに、名前と番号のリストを表示したいと思います。そのうちのいくつかは私のデータセットに基づいています。

問題は、このコードの一部である：

blobCircleWrapper.selectAll(".radarInvisibleCircle") 
         .data(function(d,i) { return d; }) 
         .enter().append("circle") 
         .attr("class", "radarInvisibleCircle") 
         .attr("r", cfg.dotRadius*1.5) 
         .attr("cx", function(d,i){ return rScale(d.value) * Math.cos(angleSlice*i - Math.PI/2); }) 
         .attr("cy", function(d,i){ return rScale(d.value) * Math.sin(angleSlice*i - Math.PI/2); }) 
         .style("fill", "none") 
         .style("pointer-events", "all") 
         .on("click", function(d,i) { // TOOLTIP WITH SUBJECTS AND AVERAGES HERE 
          newX = parseFloat(d3.select(this).attr('cx')) - 10; 
          newY = parseFloat(d3.select(this).attr('cy')) - 10; 

          tooltip 
           .attr('x', newX) 
           .attr('y', newY) 
           .html(d.value+ "<br>" + "To:") 
           .transition().duration(200) 
           .style('opacity', 1); 
         }) 
         .on("mouseout", function(){ 
          tooltip.transition().duration(200) 
           .style("opacity", 0); 
         }); 


        //Set up the small tooltip for when you hover over a circle 
        var tooltip = g.append("text") 
         .attr("class", "tooltip") 
         .style("opacity", 0); 

ツールチップは、レーダーの円に設定された、と私はdiv要素の代わりに、text要素を作成しようとすると、ツールチップが停止されます要素が作成され、配置されていても表示されます。私はここにいくつかの属性を欠けていると確信しているが、より完全なツールヒントを持つ方法がある

​​

：私はこのような何かをしようとしていましたか？ありがとうございました。

Answer 1

あなたはツールチップとして<div>を使用しています。したがって、ここにはいくつかの異なるルールがあります。

まず、divをSVGに追加することはできません（スニペット内のgの選択がSVGグループであるとします）。 body（または他のHTML要素）にdivを追加する必要があります。

第2に、HTMLにdivを追加するときに、xとyの位置を属性として設定することはできません。その代わりにevent.pageXとevent.pageYを使用し、absoluteの位置をdivに使用する必要があります。

var tip = d3.select("body") 
 
    .append("div") 
 
    .attr("class", "tip") 
 
    .style("opacity", 0); 
 

 
d3.select("svg") 
 
    .selectAll("foo") 
 
    .data(d3.range(7)) 
 
    .enter() 
 
    .append("circle") 
 
    .attr("cx", d => 20 + d * 40) 
 
    .attr("cy", 50) 
 
    .attr("r", 15) 
 
    .attr("fill", "teal") 
 
    .on("mousemove", (d, i) => { 
 
     tip.html("This is the<br>circle number " + i) 
 
      .style("left", d3.event.pageX + 10 + "px") 
 
      .style("top", d3.event.pageY + "px") 
 
      .style("opacity", 1) 
 
    }).on("mouseout",() => { 
 
     tip.style("opacity", 0) 
 
    })

.tip{ 
 
    position: absolute; 
 
    padding: 10px; 
 
    background: lightgray; 
 
    border: 1px solid black; 
 
    pointer-events: none; 
 
}

<script src="https://d3js.org/d3.v4.min.js"></script> 
 
<svg></svg>