Highlighting bars as the mouse hovers on the table rows in Protovis

I am new at protovis and I am having a problem.

I have a html table which has the data and Bar Chart made in protovis using the table's data. Now what I want is to change the color of the individual bars as mouse is hovers on that particular row.

Can anyone help开发者_开发问答 me how it can be done? Thanks in advance.

I've set up a working example here. You can't do what you're asking using just Protovis, because Protovis can't set event handlers on the HTML table. In order to achieve this, you generally need to:

1. Set up a variable to hold the state (in this case, which of the rows should be highlighted)

2. Set the visual parameter you want to change in your Protovis code (in this case, fillStyle) to a function that checks the state variable:

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

3. Set an event handler on the HTML table (I used jQuery, as your tag indicated you were using this too) that changes the state variable and re-renders the vis.

In jQuery:

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

There are other ways to do this as well, but this is generally the easiest, and for interactions involving other parts of the page it's generally a good idea to hold the state in a separate variable outside your Protovis code.

I've not used Protovis before but the interaction documentation leads me you could do it by adding something like this to your object:

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