Question

我正在使用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>

谢谢！

Answer 1

查看this plnkr的工作演示。您可以为tooltip div添加一些css，然后使用mouseover事件将div添加到对象上。希望它有所帮助。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="game.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="Gametwo.js"></script>
<title>Lombardy East Day 2</title>
</head>

<body id="etoll">
<div id="everything">
<br />
<br />

<h1 class="text"> Day 2 </h1>
<p id="intro" class="text"> Alright! Lombardy East! The great thing about this location is that it's close to many popular areas. The best places near by are Alexandra and Sandton. Alexandra, a highly populated residential area and Sandton, the richest square mile in all of Africa where so many work. Great job choosing Lombardy.
</p>
<p class="text"> So your route will be Lombardy East, Lombardy West, Alexandra to Sandton. The traffic is hectic but there are no cops around. The other side of the yellow line is clear as day. What do you do?
<p id="green" class="text">Obey traffic laws?
</p>
<p id="green" class="text">Cross the yellow line?</p>

<p id="green" class="text"> </p>

<p id="Help" class="text">Make sure your spelling is correct!</p>
<div id="placeholdertwo"></div>

<form onsubmit="return false;">
<input type="text" size="50" autofocus="autofocus" id="commandtwo"/>
</form>
</div>
</body>
</html>

Answer 2

要制作工具提示，请执行以下操作。添加工具提示样式：

第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并将其添加到body中，将其不透明度设置为0

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

第3步：

在鼠标悬停时，使其不透明度为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

如何在错误栏图d3.js上显示数字

2 个答案: