d3.js：スタイリング<text>が動作しない

d3.jsで作成されたグラフがあります。私がチャート上に点を置くと、ボーダーと背景色のテキストを表示したい。d3.js：スタイリング<text>が動作しない

は今のところ、ないスタイルを持つ唯一のテキストがホバーに表示されますし、（ツールチップ）私のコードは次のようになります。

var g = svg.append("g") 
    .attr("transform", "translate(" + (cfg.width/2 + cfg.margin.left) + "," + (cfg.height/2 + cfg.margin.top) + ")"); 

on("mouseover", function(d,i) { 
    var newX = parseFloat(d3.select(this).attr('cx')) - 10; 
    var newY = parseFloat(d3.select(this).attr('cy')) - 10; 

    tooltip 
     .attr('x', newX) 
     .attr('y', newY) 
     .text(Format(d.value)) 
     .transition().duration(200) 
     .style('opacity', 1)  
}) 
.on("mouseout", function(){ 
    tooltip.transition().duration(200) 
     .style("opacity", 0); 
}); 

var tooltip = g.append("text") 
    .attr("class", "tooltip") 
    .style("opacity", 0);

私は.tooltipにスタイルを追加すると、それは何も変わりません。その後、g.append("text")をg.append("foreignObject")、g.append("div")などに変更すると、ホバーに表示されなくなります（コンソール要素に表示されます）。

私は間違っていますか？

出典

2017-01-05 Dan

何なスタイルは、クラス 'tooltip'に追加するつもりですか？あなたはあなたの質問の最も重要な部分、つまりスタイリング自体を欠いています！ – altocumulus

@altocumulus私はOPが 'background-color'と' border'を適用しようとしていると信じています。しかし、私はあなたに同意する、それは非常に明確ではない。 –

@altocumulus申し訳ありませんが、明らかにされていませんが、Gerardo Furtadoの回答が私の望むものです – Dan

ここでの問題は、SVG <text>または<g>要素にいくつかのHTMLスタイルを適用しようとしていて、うまくいかないことです。

境界線、境界線の半径、背景色などのスタイルを設定する場合は、<div>を使用してツールチップを表示する必要があります。divはHTML要素なので、任意のスタイルを適用できます。ただし、divやその他のHTML要素をSVGに追加することはできません。

したがって、ツールチップのdivを<body>に追加し、その位置をd3.event.pageYとd3.event.pageXに設定しています。

ツールチップの簡略版でこのデモを確認してください。 CSSのすべてのスタイルを設定できますが、D3コードのスタイルを設定するだけで、どのように動作するかを確認できます。これらのスタイルのいずれもSVGのテキスト要素で動作します：

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

 
var circle = d3.select("circle") 
 
    .on("mousemove", function() { 
 
     tooltip.html("Hello") 
 
      .style("background-color", "tan") 
 
      .style("border", "1px solid black") 
 
      .style("padding", "2px") 
 
      .style("top", d3.event.pageY + 10 + "px") 
 
      .style("left", d3.event.pageX + 10 + "px") 
 
      .style("opacity", 1); 
 
    }).on("mouseout", function() { 
 
     tooltip.style("opacity", 0); 
 
    });

.tooltip { 
 
\t position: absolute 
 
}

<script src="https://d3js.org/d3.v4.min.js"></script> 
 
<svg> 
 
\t <circle cx="50" cy="50" r="20" fill="teal"></circle> 
 
</svg>

出典

2017-01-05 00:37:32

ありがとうございます！出来た – Dan

d3.js：スタイリング<text>が動作しない

答えて

関連する問題