我正在使用d3.js在其上绘制带有错误栏的散点图。我想知道是否有可能在错误栏的两端显示鼠标悬停事件以显示值。
例如,当鼠标悬停在A点的条形图的两端时,将弹出数字3.9和4.1。
这是我的plunker

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Plot</title>
    <style>
     .axis path,
     .axis line{
        fill: none;
        stroke: #000;
        shape-rendering: crishpEdges;
        }

    path {
       stroke-width: 1.5px;
       stroke: darkgrey;
       stroke-dasharray:"3, 3";
       }
    </style>
  </head>
 <body>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="errorbar.js"></script>
    <div id="chart">
    </div>

    <script>

     var data = [
       {x: 4, y: "A", s: 0.1
        },
       {x: 4, y: "B", s: 0.2
        },
       {x: 3, y: "C", s: 0.2
        },
       ];

 data.forEach(function(d){
        d.x = +d.x;
        d.y = d.y;
        d.s = +d.s;
        //return console.log(data);
    })
    //creating the plot
    var m = {t:10, r:100, b:40, l:40 },
        w = 960 - m.l - m.r,
        h = 500 - m.t - m.b;

    var x = d3.scale.linear()
        .range([0, w])
        .domain([0,d3.max(data, function(d){return d.x})]);

    var y = d3.scale.ordinal()
        .rangeRoundPoints([h-18,0])
        .domain(data.map(function(d){return d.y;}));

   var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom")
        .ticks(6);

  var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left")
        .ticks(3);

  var eb = errorBar()
          .oldXScale(x)
          .xScale(x)
          .oldYScale(y)
          .yScale(y)
          .yValue(function(d){return d.y})
          .xValue(function(d){return d.x})
          .xError(function(d){return d.s})
          .yError(function(d){return null});

    var svg = d3.select("#chart")
        .append("svg")
        .attr("width", w + m.l + m.r)
        .attr("height", h + m.t + m.b)

    var plot = svg.append("g")
    .attr("transform", "translate(" + m.l + "," + m.t + ")");

    var circles = plot.selectAll("g")
        .data(data)
        .enter()
        .append("g")

    var plotErrorbar = circles.append("g")
      .attr("class", "errorBar")
      .attr("transform", function(d) {return "translate("+ x(d.x) +","+ y(d.y) +")"})
      .style("stroke-dasharray", ("3, 3"))
      .call(eb);

    var plotCircles = circles.append("circle")
       .attr("class", "circles")
       .attr({
        cx: function(d) { return x(d.x); },
        cy: function(d) { return y(d.y); },
        r: 8
      })

    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate("+ m.l +"," + (h + m.t) + ")")
        .call(xAxis);

    svg.append("g")
        .attr("class", "y axis")
        .attr("transform","translate("+ m.l +","+ m.t +" )")
        .call(yAxis);

    </script>
  </body>
</html>


谢谢!

最佳答案

要制作工具提示,请执行以下操作。为工具提示添加样式:

步骤1添加以下样式

div.tooltip {
  position: absolute;
  text-align: center;
  width: 60px;
  height: 38px;
  padding: 2px;
  font: 12px sans-serif;
  background: lightsteelblue;
  border: 0px;
  border-radius: 8px;
  pointer-events: none;
}


第2步
进行div并将其添加到主体将其不透明度设置为0

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


第三步:

在鼠标悬停时,使其不透明度为1,在鼠标悬停时,其不透明度为0。

var circles = plot.selectAll("g")
      .data(data)
      .enter()
      .append("g").on("mouseover", function(d) {//on mouse over make opacity 0.9
        div.transition()
          .duration(200)
          .style("opacity", .9);
        //to div add the text of your choice.
        div.html(d.x + "<br/>" + d.y + "<br/>" + d.s)
          .style("left", (d3.event.pageX) + "px")
          .style("top", (d3.event.pageY - 28) + "px");
      })
      .on("mouseout", function(d) {
        div.transition()//on mouse out make opacity 0
          .duration(500)
          .style("opacity", 0);
      });


工作代码here

10-05 20:28
查看更多