为什么我的D3.js工具提示不起作用 [英] Why is my D3.js tooltip not working

问题描述

我试图使用以下代码来显示d3.js工具提示效果，但我无法使其正常工作，为什么数字没有显示:

I tried to use the following code to show a d3.js tool-tip effect but I can't get it to work, why is the number not showing up:

<style>

svg {
    width: 100%;
    height: 100%;
    position: center;
}

#hist_sexage {
   background-color: lightgrey;
}

.rect:hover {
   fill: yellow;
}
.tooltip {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    position: absolute;
    display: none;
    width: auto;
    height: auto;
    background: none repeat scroll 0 0 red;
    border: 0 none;
    border-radius: 8px 8px 8px 8px;
    box-shadow: -3px 3px 15px #888888;
    color: blue;
    font: 12px sans-serif;
    padding: 5px;
    text-align: center;
}

</style>
<svg id="hist_sexage" width="950" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var margin = {top: 30, right: 30, bottom: 40, left: 30};
var width = document.getElementById("hist_sexage").getBoundingClientRect().width-50;
var height = 400;

var g = d3.select("#hist_sexage")
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var x0 = d3.scaleBand()
    .rangeRound([0, width])
    .paddingInner(0.2);

var x1 = d3.scaleBand()
    .padding(0.1);

var y = d3.scaleLinear()
    .rangeRound([height, 0]);

var z = d3.scaleOrdinal()
    .range(["cornflowerblue", "orangered"]);

d3.csv("/blog/data/age_by_gender.csv",function(d, i, columns) {
  for (var i = 1, n = columns.length; i < n; ++i) d[columns[i]] = +d[columns[i]];
  return d;
  }, 
  function(error, data) {
  if (error) throw error;
  var keys = data.columns.slice(1);
  x0.domain(data.map(function(d) { return d.Age_Group; }));
  x1.domain(keys).rangeRound([0, x0.bandwidth()]);
  y.domain([0, d3.max(data, function(d) { return d3.max(keys, function(key) { return d[key]; }); })]).nice();

  g.append("g")
    .selectAll("g")
    .data(data)
    .enter().append("g")
    .attr("transform", function(d) { return "translate(" + x0(d.Age_Group) + ",0)"; })
    .selectAll("rect")
    .data(function(d) { return keys.map(function(key) { return {key: key, value: d[key]}; }); })
    .enter().append("rect").attr("class", "rect")
    .attr("x", function(d) { return x1(d.key); })
    .attr("y", function(d) { return y(d.value); })
    .attr("width", x1.bandwidth())
    .attr("height", function(d) { return height - y(d.value); })
    .attr("fill", function(d) { return z(d.key); })
    .on("mouseover", function() { tooltip.style("display", null); })
    .on("mousemove", function(d) {
      var xPosition = d3.mouse(this)[0] - 5;
      var yPosition = d3.mouse(this)[1] - 5;
      tooltip.attr("transform", "translate(" + xPosition + "," + yPosition + ")");
      tooltip.select("text").text(d.value);
      console.log(d.value)
      })
    .on("mouseout", function() { tooltip.style("display", "none"); });

  g.append("g")
    .attr("class", "axis")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x0))
    .selectAll("text")  
    .style("text-anchor", "end")
    .attr("dx", "-.1em")
    .attr("transform", "rotate(-45)" );;

  g.append("g")
    .attr("class", "axis")
    .call(d3.axisLeft(y).ticks(null, ".0%"))
    .append("text")
    .attr("x", 2)
    .attr("y", y(y.ticks().pop()) + 0.5)
    .attr("dy", "0.32em")
    .attr("fill", "#000")
    .attr("font-weight", "bold")
    .attr("text-anchor", "start")
    .text("Percentage");

  var legend = g.append("g")
      .attr("font-family", "sans-serif")
      .attr("font-size", 10)
      .attr("text-anchor", "end")
      .selectAll("g")
      .data(keys.slice().reverse())
      .enter().append("g")
      .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

  legend.append("rect")
      .attr("x", width - 19)
      .attr("width", 19)
      .attr("height", 19)
      .attr("fill", z);

  legend.append("text")
      .attr("x", width - 24)
      .attr("y", 9.5)
      .attr("dy", "0.32em")
      .text(function(d) { return d; });
});

// Prep the tooltip bits, initial display is hidden
  var tooltip = d3.select("#hist_sexage").append("g")
    .attr("class", "tooltip")
    .style("display", "none");

  tooltip.append("g:rect")
    .attr("width", 60)
    .attr("height", 20)
    .attr("fill", "red")
    .style("opacity", 0.5);

  tooltip.append("g:text")
    .attr("x", 30)
    .attr("y", "1.2em")
    .style("text-anchor", "middle")
    .attr("font-size", "12px")
    .attr("font-weight", "bold");

</script>

我希望看到它，如果我将鼠标移到栏上，它应该在光标旁边显示数字，但不会显示.您能帮我解决此问题吗?

I am expecting to see it, if I move over the bar, it should show the number alongside with my cursor but it does not. Can you please help me troubleshoot this issue?

谢谢

推荐答案

好吧，由于简单的原因，您看不到工具提示.您将其显示设置为none ...

Well, you can't see the tooltip for a simple reason. You set its display to none...

.style("display", "none");

...，但是您忘记在mousemove上更改其样式.因此，将永远不会渲染其子级.

... but you forgot to change its style on mousemove. Therefore, its children will never be rendered.

这是一个具有伪数据的有效演示，它更改了mousemove中的样式:

Here is a working demo with fake data, changing the style in the mousemove:

var svg = d3.select("#hist_sexage");

var data = [30, 250, 120, 150, 90];

var rects = svg.selectAll("jamesWatson")
  .data(data)
  .enter()
  .append("rect")
  .attr("x", 0)
  .attr("y", function(d, i) {
    return i * 20
  })
  .attr("height", 15)
  .attr("width", function(d) {
    return d
  })
  .attr("fill", "teal")
  .on("mousemove", function(d) {
    var xPosition = d3.mouse(this)[0] + 10;
    var yPosition = d3.mouse(this)[1] - 5;
    tooltip.style("display", "inline")
    .attr("transform", "translate(" + xPosition + "," + yPosition + ")");
    tooltip.select("text").text(d);
  })
  .on("mouseout", function() {
    tooltip.style("display", "none");
  });

var tooltip = d3.select("#hist_sexage").append("g")
  .attr("class", "tooltip")
  .style("display", "none");

tooltip.append("g:rect")
  .attr("width", 60)
  .attr("height", 20)
  .attr("fill", "red")
  .style("opacity", 0.5);

tooltip.append("g:text")
  .attr("x", 30)
  .attr("y", "1.2em")
  .style("text-anchor", "middle")
  .attr("font-size", "12px")
  .attr("font-weight", "bold");

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg id="hist_sexage"></svg>

这篇关于为什么我的D3.js工具提示不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！