Question

我在Stack Overflow上找到了mouseover事件的代码。问题在于，随着页面上缩放选项的调整，工具提示会不成比例地移动。

我正在使用带有工具提示ID的div来容纳提示。我正在使用不透明度将其打开和关闭。我正在寻找相对于要倾斜的元素固定尖端的建议。

以下是我的“ mouseover”和“ mouseout”事件：

.on('mouseover', function(d, i) {
                        var thisCategory = d3.select(this.parentNode).datum().key;
                        var fillColor=d3.select(this.parentNode).attr("fill");
                        console.log("fill:" + fillColor);
                        var thisValue = d.data[thisCategory].toFixed(2);
                        var WeekStart=d.data.WeekStart;
                        var total = d.data.total.toFixed(2);
                        tooltip
                            .html("<table><tr></tr><td>" + thisCategory + "&nbsp;</td><td class='numberDetail'><strong>" + thisValue + "</strong> / ("  + total +")</td></tr><tr><td>WeekStart: </td><td>" + WeekStart + "</td><tr></table>" )
                            .style("position", "relative")  
                            .style("left", (d3.event.pageX - 540 ) + "px")  
                            .style("top", (d3.event.pageY - 850) + "px")
                            .style('background-color',fillColor)
                            .style('color','white')
                            .style('height', '60px')
                            .style('width', '340px')
                            .style('opacity','1');
                    })

                    .on('mouseout', function(d, i) {
                        tooltip
                            .style('opacity','0');
                    })

堆积条形图的d3工具提示-相对于目标的位置取决于浏览器缩放

0 个答案: