Question

我试图在我在D3中制作的地图上包含工具提示，模仿此代码： http://bl.ocks.org/lhoworko/7753a11efc189a936371

以下是我正在处理的地图： https://pantherfile.uwm.edu/schro333/public/2016_electoral_map/

正如你在这里看到的，我有工具提示工作，当用户将鼠标悬停在状态上时，它们会显示正确的名称，但相对于光标的位置确实是关闭的。我不确定为什么会这样。

相关代码：

        svgContainer.selectAll("pathCodes")
            .data(json.features)
            .enter()
            .append("path")
            .attr("id",
                function(d){
                    var stateNameId = d.properties.name.toString();
                    stateNameId = stateNameId.replace(/\s+/g, '');
                    return stateNameId;
            }) // this function returns the name of the state with spaces stripped and assigns it to individual polygon as id
            .attr("d", pathCodes)
            .attr("stroke", "black") // state outline color
            .attr("stroke-width", "1") // state outline width
            .attr("class", "noparty") // default to no party
            .style("fill", politicalParties[0].color) // default fill is that of no party
            /////////////
            .on('mousemove', function(d) {
                var mouse = d3.mouse(svgContainer.node());
                tooltip.classed('hidden', false)
                    .attr('style', 'left:' + (mouse[0]) +
                            'px; top:' + (mouse[1]) + 'px')
                    .html(d.properties.name);
            })
            .on('mouseout', function() {
                tooltip.classed('hidden', true);
            });
            /////////////

Answer 1

您的位置错误，因为您使用的X / Y位置是基于SVG而不是页面上SVG的实际位置。

您可以使用

var loc = document.getElementById("states-map").getBoundingClientRect();
console.log(loc.top); //add this to the top

获取偏移量。不确定d3方式。

将工具提示映射到错误的位置

1 个答案: