d3 v4 工具提示传递数据 d 问题
d3 v4 tooltip passing data d issue
我正在尝试让文本在鼠标悬停在 x 轴上的名称上时显示。这 Whosebug post 几乎到达那里,除了我无法将数据传递给鼠标悬停时调用的函数。
// 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 是我唯一使用的库。
你能不能只在鼠标悬停回调中设置文本,你可以在其中访问 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);
我正在尝试让文本在鼠标悬停在 x 轴上的名称上时显示。这 Whosebug post 几乎到达那里,除了我无法将数据传递给鼠标悬停时调用的函数。
// 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 是我唯一使用的库。
你能不能只在鼠标悬停回调中设置文本,你可以在其中访问 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);