Question

我试图在d3js中添加我认为是基本工具提示的散点图，并想知道最简单的方法。现在，当您将鼠标悬停在圆圈上时，x和y坐标将显示在文本中。我希望这些出现在点附近的讲话泡泡中。像this这样的东西。讲话泡泡不一定非常像，但我希望它位于该点附近并指向相关的圆圈。

这是主要代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>D3: Adjusted radii</title>
        <script type="text/javascript" src="../d3/d3.v3.js"></script>
        <style type="text/css">
            /* No style rules here yet */       
        </style>
    </head>
    <body>
        <script type="text/javascript">

            //Width and height
            var w = 500;
            var h = 100;
            var padding = 20;

            var dataset = [
                            [5, 20], [480, 90], [250, 50], [100, 33], [330, 95],
                            [410, 12], [475, 44], [25, 67], [85, 21], [220, 88]
                          ];

            //Create scale functions
            var xScale = d3.scale.linear()
                                 .domain([0, d3.max(dataset, function(d) { return d[0]; })])
                                 .range([padding, w - padding * 2]);

            var yScale = d3.scale.linear()
                                 .domain([0, d3.max(dataset, function(d) { return d[1]; })])
                                 .range([h - padding, padding]);

            var rScale = d3.scale.linear()
                                 .domain([0, d3.max(dataset, function(d) { return d[1]; })])
                                 .range([2, 5]);

            //Create SVG element
            var svg = d3.select("body")
                        .append("svg")
                        .attr("width", w)
                        .attr("height", h);

            svg.selectAll("circle")
               .data(dataset)
               .enter()
               .append("circle")
               .attr("cx", function(d) {
                    return xScale(d[0]);
               })
               .attr("cy", function(d) {
                    return yScale(d[1]);
               })
               .attr("r", function(d) {
                    return rScale(d[1]);
               });

            // svg.selectAll("text")
            //    .data(dataset)
            //    .enter()
            //    .append("text")
            //    .text(function(d) {
            //          return d[0] + "," + d[1];
            //    })
            //    .attr("x", function(d) {
            //          return xScale(d[0]);
            //    })
            //    .attr("y", function(d) {
            //          return yScale(d[1]);
            //    })
            //    .attr("font-family", "sans-serif")
            //    .attr("font-size", "11px")
            //    .attr("fill", "red");
             svg.selectAll("circle").on("mouseover", function(d) {
                //Get this bar's x/y values, then augment for the tooltip
                var xPosition = parseFloat(d3.select(this).attr("cx")) ; 
                var yPosition = parseFloat(d3.select(this).attr("cy")) ; 

                //Create the tooltip label
                svg.append("text")
                   .attr("id", "tooltip")
                   .attr("x",  .2*w)
                   .attr("y",  .2*h)
                   .attr("text-anchor", "middle")
                   .attr("font-family", "sans-serif")
                   .attr("font-size", "11px")
                   .attr("font-weight", "bold")
                   .attr("fill", "black")
                   .text("x = "+d3.round(xPosition,2)+",y = "+d3.round(yPosition,2));

            svg.selectAll("circle").on("mouseout", function(d) {
                //Remove the tooltip
                d3.select("#tooltip").remove();

           })
           })
        </script>
    </body>
</html>

谢谢！

Answer 1

一个非常好的起点是D3 Tip。

如果您想自己动手，那么您可以将其作为指导。如果您对使用D3 Tip很满意，那么它就像以下一样简单（取自Github网站）：

/* Initialize tooltip */
tip = d3.tip().attr('class', 'd3-tip').html(function(d) { return d; });

/* Invoke the tip in the context of your visualization */
vis.call(tip)

vis.selectAll('rect')
  .data(data)
.enter().append('rect')
  .attr('width', function() { return x.rangeBand() })
  .attr('height', function(d) { return h - y(d) })
  .attr('y', function(d) { return y(d) })
  .attr('x', function(d, i) { return x(i) })
  .on('mouseover', tip.show)
  .on('mouseout', tip.hide)

Answer 2

不是仅创建文本元素，而是创建包含椭圆，多边形和文本元素的组元素。显示时，这些组合将看起来像一个气泡

//Create the tooltip label
var tooltipG = svg.append("g")
  .attr("transform", "translate(" + xPosition + "," + yPosition + ")");

tooltipG.append("polygon")
  .attr("points", "0,0 0,-50, 50,-50")
  .style("fill", "grey");

tooltipG.append("ellipse")
  .attr("cx", 0)
  .attr("cy", -75)
  .attr("rx", 100)
  .attr("ry", 50)
  .style("fill", "grey")

tooltipG.append("text")
  .attr("dy", -75)
  .text(("x = "+d3.round(xPosition,2)+",y = "+d3.round(yPosition,2));

d3js - 添加像工具提示一样的语音泡泡？

2 个答案: