Подсветка полос при наведении курсора мыши на строки таблицы в 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