我正在尝试将我认为是基本工具提示的内容添加到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>


谢谢!

最佳答案

一个非常好的起点是查看D3 Tip

javascript - d3js-添加像工具提示一样的气泡?-LMLPHP

如果您想自己动手,则可以随意使用它作为指南。如果您对使用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)

09-16 00:22