Question

将鼠标悬停在该城市的圆圈上时，以下代码会生成一个带有城市名称的文本框。如何删除鼠标悬停效果并在地图最初加载时将其永久保留？谢谢。

   // Place Capital Cities the Map
        svgContainer.selectAll("circle")
            .data(capitalCities)
          .enter().append("circle")
            .attr("id", function(d, i) { return d.name.toLowerCase(); })
            .attr("cx", function(d, i) { return projectionType(d.coordinates)[0]; })
            .attr("cy", function(d, i) { return projectionType(d.coordinates)[1]; })
            .attr("r", "10")
            .attr("stroke", "black")
            .attr("stroke-width", "2px")
            .style("fill", "#FFFF00")
            .text("City Name:" + "<br />" + cityName);


        // Mouse Over a City tells us the name
        d3.selectAll("circle").on("mouseover", function() {

            // Select the circle being moused over
            circle = d3.select(this);

            // Extract the name of the city from the bound data
            cityName = circle.data()[0].name;

            // Update and place the tooltip with the city name.
            div.html("City Name:" + "<br />" + cityName)
                .style("left", (d3.event.pageX + 9) + "px")
                .style("top",  (d3.event.pageY - 43) + "px")
                .style("display", "inline");
        })

        // Mouse Out of a City removes the text
        d3.selectAll("circle").on("mouseout", function() {

          // Make the tooltip invisible
          div.style("display", "none");

        })

      });

Answer 1

对于初学者，只需删除＆＃34; mouseout＆＃34;事件。然后div不会在mouseout上消失（你也可以将函数绑定到其他一些事件，例如按钮）。但正如蒂姆建议的那样，如果你希望文本永久保留在每个城市（即不是鼠标悬停事件），那么div方法可能就没有了（除非你想要很多div元素）

mouseover事件会移动单个div并更改文本，如果您想要永久地在每个＆＃34; circle＆＃34; / city旁边显示文本，那么文本元素可能会更简单一些：

var text = svgContainer.selectAll("text")
.data(circleData)
.enter()
.append("text");

var textLabels = text
.attr("x", function(d) { return d.cityX; })
.attr("y", function(d) { return d.cityY; })
.text( function (d) { return "City Name:" + "<br />" + d.cityName })
.attr("font-family", "sans-serif")
.attr("font-size", "20px")
.attr("fill", "red");

显然修改此选项以适合您的数据结构，并将标签移到城市旁边而不是顶部。

如何在D3中保持文本框可见

1 个答案: