代码之家 › 专栏 › 技术社区 › ofey

d3 v4工具提示传递数据d问题

mouseover tooltip text d3.js

0

ofey · 技术社区 · 8 年前

stackoverflow post 几乎达到了目标,只是我无法将数据传递给mouseover上调用的函数。

// Add the X Axis
  svg.append("g")
    .attr("class", "axis")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x))
    .selectAll("text")
    .style("text-anchor", "end")
    .style("font", "7px times")
    .attr("dx", "-.8em")
    .attr("dy", ".15em")
    .attr("transform", "rotate(-65)")
    .on("mouseover", function(d) {
      return tooltip.style("visibility", "visible")
    })
    .on("mouseout", function(d) {
      return tooltip.style("visibility", "hidden");
    });

  var tooltip = d3.select("#info")
    .append("div")
    .style("position", "absolute")
    .style("z-index", "10")
    // .style("visibility", "hidden")
    .text("a simple tooltip" + d.name);

当我删除d.name时,它会起作用。我无法将d传递给工具提示。

也许我需要使用.data(data)。enter(),我已经试过了,但可能我没有正确使用它。

谢谢

https://d3js.org/d3.v4.min.js 是我唯一使用的图书馆。

1 回复 | 直到 8 年前

1

2

user3432422 8 年前

你能在鼠标悬停回调中设置文本吗?在那里你可以访问 d ?

// Add the X Axis
svg.append("g")
    .attr("class", "axis")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x))
    .selectAll("text")
    .style("text-anchor", "end")
    .style("font", "7px times")
    .attr("dx", "-.8em")
    .attr("dy", ".15em")
    .attr("transform", "rotate(-65)")
    .on("mouseover", function(d) {
        return tooltip
            .style("visibility", "visible")
            .text("a simple tooltip" + d.name);
    })
    .on("mouseout", function(d) {
        return tooltip.style("visibility", "hidden");
    });

var tooltip = d3.select("#info")
    .append("div")
    .style("position", "absolute")
    .style("z-index", "10")
    // .style("visibility", "hidden")
    // .text("a simple tooltip" + d.name);