Question

通常，当您在D3.js中追加对象并且想要定义特定的可视化（例如，显示在另一个对象顶部的信息框）时，您可以设置样式。就我而言，我正在尝试这个：

...
.on("mouseover", function (d, i) {
           graph.append("div")
                .attr("class","info-box")
                // info-box is defined with position: absolute
                .style("top", height - (yV * d))
                .style("left", (xV * i))
                .text("INFO")
}
...

因此，在我使用此代码定义的其中一个对象上进行鼠标悬停（假设它是一系列垂直条中的第二个）时，应该会出现一个包含以下代码的框：

<div class="info-box" style="top: 30; left: 10">
    INFO
</div>

问题是，由于某种原因，当代码生成框时，它没有设置我定义的样式，事实上，属性“样式”根本没有出现，这非常令人讨厌考虑我希望这个框出现在我正在徘徊的栏顶部。

在我正在使用Spring MVC编写的代码中，这种情况发生在我身上。更确切地说，我从自定义标记生成javascript代码，该标记接收几个参数，然后在jsp中“渲染”，使用这些参数调用它。我不知道它是否有事可做，但我完全相信两件事：

与其他javascript文件没有“冲突”，因为d3是我用于代码的唯一.js。
在jsp中生成的完全相同的javascript代码在常见的html页面中按预期工作。

有些解决方法吗？在Spring中进行的一些配置阻止我使用嵌套在HTML中的样式？我真的会答应这个，因为它让我发疯，我需要尽快解决它。

最后两个笔记：

我已经尝试过使用attr（“style”，“top：”+（height - （yV * d））+“; left”+（xV * i）+“;”）并且它没有作品。：（
使用类不是一个选项，因为这在很大程度上取决于我正在悬停的对象的值，我不能为每个可能的场景创建一个类（我会在这之前切开我的静脉）。

Answer 1

您只需添加单位，在本例中为“px”，以便设置这些css属性。

.on("mouseover", function (d, i) {
       graph.append("div")
            .attr("class","info-box")
            // info-box is defined with position: absolute
            .style("top", (height - (yV * d)) + 'px')
            .style("left", (xV * i) + 'px')
            .text("INFO")

D3无法将样式设置为附加对象

1 个答案: