当mouseOver事件发生时，我正在尝试将工具提示添加到我的Map。mouseOver函数的目标是突出显示路径并显示提示。
我用的是d3-v6-tip
这就是我选择svg并调用tip函数的方式
var svg = d3.select("#mapDiv")
.append("svg")
.attr("width", width)
.attr("height", height)
.style("background-color", "white")
.style("border", "solid 1px black")
.call(d3.zoom()
.on("zoom", function (event) {
svg.attr("transform", event.transform);
})
.scaleExtent([1, 1])
)
.append("g");
const tip = d3.tip().attr('class', 'd3-tip').html(function (event, d) {
console.log(event.target.id);
return event.target.id;
});
svg.call(tip);我是这样画Map的：
d3.json(path).then(function (json) {
var projection = d3.geoMercator();
var features = json.features;
var fixed = features.map(function (feature) {
return turf.rewind(feature, { reverse: true });
})
var geoPath = d3.geoPath().projection(projection);
projection.fitSize([width, height], { "type": "FeatureCollection", "features": fixed })
svg.selectAll("path")
.data(fixed)
.enter()
.append("path")
.attr("d", geoPath)
.attr("id", function (d) { return d.properties.FIPS_10_; })
.style("fill", "red")
.style("stroke", "transparent")
.on("mouseover", mouseOver)
.on("mouseleave", mouseLeave)
.on("click", mouseClick)
})如何tip.show在mouseOver函数中调用www.example.com：
let mouseOver = function (event, d) {
var countryCode = event.target.__data__.properties.FIPS_10_;
d3.selectAll("path#" + countryCode)
.transition()
.duration(200)
.style("opacity", 1)
.style("stroke", "black")
tip.show(event, d);
}问题：我在tip声明中输入了console.log。当我的鼠标悬停在它上面时，它在控制台中显示当前的国家名称（event.target.id）。但是，由于以下错误，工具提示从未显示：Uncaught TypeError: d3.event is undefined。
我不完全确定这是否与库本身有关，因为当d3.event不再存在于d3.v6中时，源代码调用d3.event，或者我在代码中做错了什么
还有，有没有比使用库更好的方法来创建工具提示？
3条答案
按热度按时间fcwjkofz1#
我把我的D3版本降级到5，现在它工作了。我认为D3-v6-tip库有问题，不知道为什么。
m1m5dgzv2#
我相信你只是错过了调用提示的步骤。
检查页面显示'If you want to load it as standalone...'的下面的代码：
您的事件处理程序代码似乎可以根据此调整正常工作：
关于“更好的方法”，IMO这取决于你是否有库中没有涵盖的特定用例。此外，考虑到amount of work已经由库为我们完成，他们花了时间为D3 v6更新。
slmsl1lt3#
我也为此而挣扎。我通过NPM导入d3和d3-tip，用于我的Next/React应用程序。
1.“d3 is not defined”错误是因为d3在
window对象上不是全局可用的。如果通过NPM导入d3和d3-tip，则使d3可用于窗口。把它放在你的代码中：if (typeof window !== "undefined") { window.d3 = d3 }1.请确保您正确遵循新的v6 API：对
tip.html()和tip.show()的调用需要在数据之前首先传递event，例如function (event, d) {...}不只是
d。这就是为什么根据OP的建议降级到v5一开始对我有用--我没有这样做。这也可以解释为什么工具提示无法正确定位。我希望这能帮助像我一样挣扎的人。我真的很感激这个伟大的小可靠，简单而优雅的工具提示，我已经广泛使用了多年，以及各种forker和维护人员的努力，以保持它与最新的d3版本兼容。