d3.jsのmouseover時の情報表示

前提・実現したいこと

d3.jsを利用しており、円（円グラフではなく、circle）を表示させており、マウスが乗った際に、円の大きさの情報を表示（tooltip）させたいと考えております。

発生している問題・エラーメッセージ

検証モードで確認したところ、要素自体は出ているのですが、文字が表示されませんでした。

該当のソースコード

1)css
.tooltip {
position: absolute;
text-align: center;
width: auto;
height: auto;
padding: 5px;
font: 60px;
background: red;
color: #000;
border-radius: 4px;
-webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.8);
-moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.8);
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.8);
visibility: hidden;
}

2)javascript
var svgWidth = 640; // SVG横幅
var svgHeight = 800; // SVG縦幅

  var dataset = [
    { name: "A", cx: 100, cy: 100, r: 30, color: "DodgerBlue" },
    { name: "B", cx: 100, cy: 200, r: 30, color: "DodgerBlue" },
  ];
  var tooltip = d3.select("body").append("div").attr("class", "tooltip");

  var svg = d3
    .select("body")
    .append("svg")
    .attr("width", svgWidth)
    .attr("height", svgHeight);

// 円を描画

  svg
    .selectAll("circle")
    .data(dataset)
    .enter() 
    .append("circle")
    .attr("cx", function (d) {
      return d.cx; // X座標
    })
    .attr("cy", function (d) {
      return d.cy; // Y座標
    })

    .attr("r", function (d) {
      return d.r; // 円の半径
    })
    // 円の色
    .attr("fill", function (d) {
     
      return d.color;
    })

    //イベント設定
    .attr("class", "circle")
    .on("mouseover", function (d) {
      tooltip
        .style("visibility", "visible")
        .html("name : " + d.name + "<br>value : " + d.r);
    })
    .on("mousemove", function (d) {
      tooltip
        .style("top", d3.event.pageY - 20 + "px")
        .style("left", d3.event.pageX + 10 + "px");
    })
    .on("mouseout", function (d) {
      tooltip.style("visibility", "visible");
    });

試したこと

類似コードで棒グラフ等では作成できたのですが、円では表示されませんでした。

補足情報（FW/ツールのバージョンなど）

d3.js　version5を利用しております。
src="https://d3js.org/d3.v5.min.js"
初めて投稿させていただくため、不備等ございましtら、ご連絡をいただけますと幸いです。

行動規範の内容に同意します

回答1件

ベストアンサー

ご記載いただいたソースコードを単純にHTMLのファイルにして確認してみたところ、私の環境ではツールチップの中に文字列が表示されているように見えました。
それ以外のコードの影響を受けているのかもしれません。
(あるいは環境の影響を受けているのかもしれません。ブラウザーなどの環境も明記いただいた方が良いのかもしれません。)

正しい姿がどういったものか正しく把握できていないかもしれませんが、私の環境では添付した画像の通り表示されています。
本来の環境から使用されているコードと、比較してみたら何かわかりますでしょうか。
(単体で動かせる状態で問題が再現するコードをご自身で作ってみると問題解決できるかもしれません)

html
1<!DOCTYPE html>
2<html>
3    <head>
4        <meta charset="utf-8">
5        <title>d3.jsのmouseover時の情報表示</title>
6        <style>
7            .tooltip {
8                position: absolute;
9                text-align: center;
10                width: auto;
11                height: auto;
12                padding: 5px;
13                font: 60px;
14                background: red;
15                color: #000;
16                border-radius: 4px;
17                -webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.8);
18                -moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.8);
19                box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.8);
20                visibility: hidden;
21            }
22        </style>
23    </head>
24    <body>
25        <h1>d3.jsのmouseover時の情報表示</h1>
26        <script src="https://d3js.org/d3.v5.min.js"></script>
27        <script>
28            var svgWidth = 640; // SVG横幅
29            var svgHeight = 800; // SVG縦幅
30            var dataset = [
31                { name: "A", cx: 100, cy: 100, r: 30, color: "DodgerBlue" },
32                { name: "B", cx: 100, cy: 200, r: 30, color: "DodgerBlue" },
33            ];
34            var tooltip = d3.select("body").append("div").attr("class", "tooltip");
35            var svg = d3
36                .select("body")
37                .append("svg")
38                .attr("width", svgWidth)
39                .attr("height", svgHeight);
40            // 円を描画
41            svg
42                .selectAll("circle")
43                .data(dataset)
44                .enter() 
45                .append("circle")
46                .attr("cx", function (d) {
47                    return d.cx; // X座標
48                })
49                .attr("cy", function (d) {
50                    return d.cy; // Y座標
51                })
52                .attr("r", function (d) {
53                    return d.r; // 円の半径
54                })
55                // 円の色
56                .attr("fill", function (d) {
57                    return d.color;
58                })
59                //イベント設定
60                .attr("class", "circle")
61                .on("mouseover", function (d) {
62                    tooltip
63                        .style("visibility", "visible")
64                        .html("name : " + d.name + "<br>value : " + d.r);
65                })
66                .on("mousemove", function (d) {
67                    tooltip
68                        .style("top", d3.event.pageY - 20 + "px")
69                        .style("left", d3.event.pageX + 10 + "px");
70                })
71                .on("mouseout", function (d) {
72                    tooltip.style("visibility", "visible");
73                });
74        </script>
75    </body>
76</html>