0

通常，当您在 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>

问题是，由于某种原因，当代码生成框时，它没有设置我定义的样式，实际上，属性“style”根本没有出现，考虑到我想要的，这很烦人这个框出现在我悬停的栏的顶部。

这发生在我正在 Spring MVC 中处理的代码中。更准确地说，我从一个接收几个参数的自定义标记生成 javascript 代码，然后它在使用这些参数调用它的 jsp 中“呈现”。我不知道它是否有事可做，但我很确定两件事：

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

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

最后两点：

  1. 我已经尝试过使用 attr("style","top: " + (height - (yV * d)) + "; left" + (xV * i) + ";") 并且它不起作用。:(
  2. 使用类不是一种选择，因为这在很大程度上取决于我悬停的对象的值，并且我无法为每种可能的情况创建一个类（在这样做之前我会切开我的血管）。
4

1 回答 1

3

您只需要添加单位，在本例中为“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")
于 2013-08-21T07:55:05.627 回答