Question

所以我用d3.js创建了一个图表。当我在图表上悬停点时，我想显示带有边框和背景颜色的文本。

现在，悬停时只显示没有样式的文字，我的代码（工具提示）如下所示：

var g = svg.append("g")
    .attr("transform", "translate(" + (cfg.width/2 + cfg.margin.left) + "," + (cfg.height/2 + cfg.margin.top) + ")");

on("mouseover", function(d,i) {
    var newX =  parseFloat(d3.select(this).attr('cx')) - 10;
    var newY =  parseFloat(d3.select(this).attr('cy')) - 10;

    tooltip
       .attr('x', newX)
       .attr('y', newY)
       .text(Format(d.value))
       .transition().duration(200)
       .style('opacity', 1)    
})
.on("mouseout", function(){
    tooltip.transition().duration(200)
        .style("opacity", 0);
});

var tooltip = g.append("text")
    .attr("class", "tooltip")
    .style("opacity", 0);

当我向.tooltip添加样式时，它不会改变任何内容。然后，当我将g.append("text")更改为g.append("foreignObject")，g.append("div")等其他内容时，它们甚至不会出现在悬停状态（它们显示在控制台元素中）。

我做错了什么？

Answer 1

这里的问题是您尝试将某些HTML样式应用于SVG <text>或<g>元素，但这样做无效。

如果要设置边框，边框半径，背景颜色等样式，则应使用<div>显示工具提示，以便应用所需的任何样式，因为div是HTML元素。但是，有一个问题：您不能将div或任何其他HTML元素附加到SVG。

因此，解决方案是将工具提示div附加到<body>，并使用d3.event.pageY和d3.event.pageX设置其位置。

使用工具提示的简化版本检查此演示。您可以在CSS中设置所有样式，但我在D3代码中设置样式只是为了让您了解它是如何工作的。这些样式都不适用于SVG文本元素：

var tooltip = d3.select("body").append("div")
    .attr("class", "tooltip")
    .style("opacity", 0);

var circle = d3.select("circle")
    .on("mousemove", function() {
        tooltip.html("Hello")
            .style("background-color", "tan")
            .style("border", "1px solid black")
            .style("padding", "2px")
            .style("top", d3.event.pageY + 10 + "px")
            .style("left", d3.event.pageX + 10 + "px")
            .style("opacity", 1);
    }).on("mouseout", function() {
        tooltip.style("opacity", 0);
    });

.tooltip {
	position: absolute
}

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg>
	<circle cx="50" cy="50" r="20" fill="teal"></circle>
</svg>

d3.js：样式<text>不起作用

1 个答案: