鼠标悬停在Protovis中的表行上时高亮显示条形图

Question

我是protovis的新手，遇到了一个问题。

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

有人能帮我怎么做吗？提前谢谢。

Answer 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代码之外的单独变量中。

Answer 2

我以前没有使用过Protovis，但交互文档告诉我，你可以通过在对象中添加这样的东西来实现：

.event("mouseover", function() this.fillStyle("orange")) // override
.event("mouseout", function() this.fillStyle(undefined)) // restore