1

我是 protovis 的新手,我遇到了问题。

我有一个 html 表格,其中包含使用表格数据在 protovis 中制作的数据和条形图。现在我想要的是在鼠标悬停在该特定行上时更改各个条的颜色。

谁能帮我怎么做?提前致谢。

4

2 回答 2

1

我在这里设置了一个工作示例。仅使用 Protovis 无法完成您的要求,因为 Protovis 无法在 HTML 表上设置事件处理程序。为了实现这一点,您通常需要:

  1. 设置一个变量来保存状态(在这种情况下,应该突出显示哪一行)
  2. 将要在 Protovis 代码中更改的视觉参数(在本例中为fillStyle)设置为检查状态变量的函数:

    .fillStyle(function(d) { return hilighted == d.name ? "orange" : "blue" });

  3. 在 HTML 表上设置一个事件处理程序(我使用 jQuery,因为您的标签表明您也在使用它)更改状态变量并重新呈现 vis。

在 jQuery 中:

$('#myTable tr').mouseover(function() {
    // set the state variable
    hilighted = $(this).data('name');
    // re-render the vis
    vis.render();
});

还有其他方法可以做到这一点,但这通常是最简单的,对于涉及页面其他部分的交互,将状态保存在 Protovis 代码之外的单独变量中通常是个好主意。

于 2011-06-12T20:23:13.260 回答
0

我以前没有使用过 Protovis,但是交互文档告诉我你可以通过在你的对象中添加这样的东西来做到这一点:

.event("mouseover", function() this.fillStyle("orange")) // override
.event("mouseout", function() this.fillStyle(undefined)) // restore
于 2011-06-09T04:31:44.890 回答