Question

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

<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>

我期待看到它，如果我移动到栏上，它应该显示我的光标旁边的数字，但事实并非如此。你能帮我解决一下这个问题吗？

谢谢，

Answer 1

好吧，您无法看到工具提示的原因很简单。您将其显示设置为none ...

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

...但你忘了在mousemove改变它的风格。因此，它的孩子永远不会被渲染。

这是一个包含假数据的工作演示，更改了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工具提示不起作用

1 个答案: