Есть ли способ заставить Internet Explorer понимать это.style.setProperty?

#javascript #d3.js #cross-browser

#javascript #d3.js #кроссбраузерность #кроссбраузерный

Вопрос:

Я начал использовать отличный D3.js библиотека визуализации данных (http://mbostock.github.com/d3 /).

Результаты отлично работают в Firefox и Chrome, но не в IE. Одной из проблем, по-видимому, является интенсивное использование this.style.setProperty и this.style.removeProperty с помощью D3, которое не распознается IE.

Мне было интересно, знает ли кто-нибудь об обходном пути, прокладке или чем-то подобном? (Кстати, мой JavaScript довольно плохой).

Комментарии:

1. Похоже, что это было бы тем, что .attr (‘propname’, ‘value’) выполнил бы в jQuery. Возможно, вы могли бы создать некоторую оболочку typeof, взломав определение setProperty в библиотеке d3. jQuery работает как кроссбраузерный.

Ответ №1:

Я боролся с той же ошибкой, вы можете просто решить ее, используя следующий шаблон, когда вы хотите изменить стиль.

 element.style("property", "value");
  

Абсолютно необходимо, чтобы значение всегда было строкой. В противном случае вы получите странную символьную ошибку в IE9, поскольку он может обрабатывать только строки.

Я тестировал это с помощью D3JS 3.2.8.

Ответ №2:

Как насчет .classed(‘class’, true / false)? Это отлично работает в IE9:

 function mouseOver(d, i) {
    var element = d3.select(this);
    var alreadyHasClass = element.classed('className'); // boolean
    element.classed('cssClass', !alreadyHasClass); // set/remove class
}
  

Кстати, добавлять / удалять классы к элементам быстрее, чем добавлять информацию к «style».

Комментарии:

1. Хорошая идея, но, к сожалению, не в моем случае. Я использую функцию, управляемую данными, для перехода элементов, например позиционирования. Добавление и удаление классов этого не сделают. d3 использует style.setProperty внутренне для этого.

2. Можете ли вы привести пример? Потому что я размещаю свои элементы (пути, полигоны …) на основе данных и перемещаю их после этого с помощью transform / translate. У меня это отлично работает в IE9.

3. Извините — следовало уточнить, что я использую d3 для управления элементами HTML, а не SVG. Вы можете посмотреть, что я создал в patientstori

Ответ №3:

Я полагаю, что новейшая версия 2.1.3 решает эту проблему. Взгляните.

Комментарии:

1. Спасибо за это — попробовал более новую версию, но не получилось. Чтобы уточнить, я использую d3 для прокрутки HTML-элементов на странице. В комментарии ниже приведена ссылка на текущую версию.

2. Соответствующий коммит — c2e3735 ; Я думаю, версия 2.0.5. Но это добавляет поддержку только для IE9. Я полагаю, что OP запрашивает об IE8 или ниже, который официально не поддерживается. Однако существует обходной путь .