Question

我正在尝试构建一个浮动工具提示，并使用一个文本元素来跟踪鼠标的位置。在示例代码中，我将svg元素附加到文档并添加一个mouseover事件。然后，我附加一个文本元素。

在mouseover事件中，我按ID选择文本元素，然后尝试按过渡方式移动它。 mouseover事件正在触发，但过渡未触发。我显然缺少了一些东西，但无法弄清楚它可能是什么。预先感谢。

</head>
<body>
    <div id="content"></div>
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <script>
        // Create Event Handlers for mouse
        function handleMouseOver(d, i) {  // Add interactivity

        d3.select("#tooltipL1 text").transition()
            .attr('stroke', 'red')
            .attr("x", d3.event.pageX + 20)
            .attr("y", d3.event.pageY - 30);

        }

       var svgContainer = d3.select("#content")
            .append("svg:svg")
            .on("mouseover", handleMouseOver)
            .attr("width", 200)
            .attr("height", 200);

        var tooltip = svgContainer
            .append("text")
            .attr("id", "tooltipL1")
            .attr("x", 0)
            .attr("y", 15)
            .attr('stroke', 'black')
            .attr('text-anchor', 'start')
            .style("font-size", 14)
            .style("font-family", "sans-serif")
            .text("Row1");
    </script>


</body>
</html>

我已经尝试了大多数mobstock示例。我以为缺少数据或g元素可能在起作用，因此尝试添加它们，但无济于事。但是其他示例似乎没有使用它们。

Answer 1

您错误地选择了工具提示。为了选择工具提示，只需使用如下所示的工具提示的ID。

// Create Event Handlers for mouse
function handleMouseOver(d, i) {  // Add interactivity

d3.select("#tooltipL1").transition()
    .attr('stroke', 'red')
    .attr("x", d3.event.pageX + 20)
    .attr("y", d3.event.pageY - 30);

}

此外，您可能要使用mousemove而不是mouseover。 mouseover事件终止，可能会更加不稳定。 mousemove事件将跟随鼠标。

因此svg的代码为：

var svgContainer = d3.select("#content")
     .append("svg:svg")
     .attr("width", 200)
     .attr("height", 200)
     .on("mousemove", handleMouseOver);

这应该有效。这是一个工作块：https://blockbuilder.org/akulmehta/5419f3cc86599b391578a54352eb107e

什么会导致过渡不触发所选元素

1 个答案: