Internet Explorer 10 не показывает путь svg (график d3.js)

Ответ 1

Резюме:

В IE есть ошибка которая приводит к неправильному отображению путей с маркерами. Исходный код с удаленными маркерами без проблем.

Существует три решения:

3. Не используйте маркеры
4. Вставить маркеры в путь следующим образом: http://jsfiddle.net/niaconis/3YsWY/9/
5. Подождите, пока Microsoft исправит эту ошибку.

Вариант 2, хотя и немного уродлив, вероятно, наиболее жизнеспособен.

Оригинальное сообщение:

К сожалению, я нашел ответ Джеймса только для статического svg.

Я вытащил css и javascript из оригинального примера и поместил их в jsfiddle. Ссылки отображались правильно в Chrome 26 (это был мой тип контрольного теста), но не отображались вообще в IE 10 (как и ожидалось). Затем я редактировал javascript, который касался создания ссылок в соответствии с ответом, который Джеймс дал:

var path = svg.append("svg:g")
    .attr("fill", function(d) { return "none"; }) /*new*/
    .attr("stroke-width", function(d) { return "1.5px"; }) /*new*/
    .attr("stroke", function(d) { return "#666"; }) /*new*/
    .selectAll("path")
    .data(force.links())
    .enter().append("svg:path")
    .attr("class", function(d) { return "link " + d.type; })
    .attr("marker-end", function(d) { return "url(#" + d.type + ")"; });

Это добавило указанные атрибуты в элемент <g>, но не повлияло на отображение "живого" графика. (Проверяя сейчас, я заметил, что "статический" график отображает ссылки в IE10 даже без этих атрибутов, как показано здесь.)

Я смог сделать ссылки видимыми в IE10 (даже прямо в исходный пример) с помощью панели инструментов разработчика IE. Я нашел один из тегов <path> в DOM, а затем на вкладке "Стиль" справа снял флажок и перепроверял стиль "путь .link".

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

Единственный источник информации, который я могу найти, кажется актуальным, - это сообщение SO: Элемент не отображается в IE7, пока я не отредактирую его через панель инструментов разработчика
Тем не менее, я довольно новичок в svg, поэтому у меня нет ни малейшего представления о том, как перенести исправление, описанное там, в svg (это исправление было для элемента html)

Может быть, это поможет кому-то попасть в правильном направлении?

P.S. Я знаю, что это не совсем ответ, и я бы просто написал это как ответ на ответ Джеймса, но, похоже, у меня нет достаточной репутации для этого. =\

Update:

Как выясняется, эта проблема полностью связана с маркерами. Эта скрипта является исходным кодом, но с удалением маркеров, и ссылки отображаются просто отлично. Проблема с маркером была задокументирована до и является серьезной ошибкой IE10. Почему это также приводит к исчезновению ссылок, я не знаю.

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

Если кто-нибудь может найти работу для самой проблемы с маркером, это будет лучше, и это должно быть дополнительно опубликовано как ответ на вопрос другого маркера.

(Также обратите внимание: мое решение делает пунктирные ссылки ужасными, поэтому я сделал их светло-голубыми.)

Об этой ошибке сообщается Microsoft, но до сих пор они, похоже, отклонили или проигнорировали ее. Перейдите в этот пост на веб-сайте отслеживания проблем Microsoft и нажмите ссылку, указывающую, что вы можете воспроизвести эту ошибку. Может быть, мы можем привлечь их внимание?

Ответ 2

другой вопрос маркера имеет отличный ответ Кристиана Лунда, который работал у меня очень хорошо.

Чтобы избавить вас от необходимости идти туда, вот суть вещей:

В моей силовой анимации у меня есть функция tick, которая выглядит так:

force.on("tick", function() {
  ...
});

Я также сохраняю все мои ссылки в графе внутри переменной link, определенную так:

var link = svg.selectAll(".link").data(links).enter() ...

Теперь, чтобы реализовать магию, предложенную Кристианом, я добавил эту строку в начале моей функции tick:

force.on("tick", function() {
  link.each(function() {this.parentNode.insertBefore(this, this); });
  ...
});

Я оставил все мои маркеры неповрежденными. Какая эта маленькая вещь удивляет, перебирает все узлы ссылок каждый тик анимации и повторно добавляет их в DOM. Это заставляет IE 10 повторно отображать их, и все хорошо с миром.

Это, по-видимому, устраняет проблемы IE 10... конечно, рекомендуется добавлять этот патч только в IE 10

Если это сработает для вас, не забудьте перейти к другому вопросу и дать Кристиану возвышение

Ответ 3

Я не уверен, что это уже было разрешено, но график почти идентичен мне во всех браузерах, которые я сравнивал. У меня нет IE10, но он отлично смотрится в IE9, и я тестировал статическую копию графика на NetRenderer IE10, и это тоже выглядело отлично.

Единственное различие, которое я мог видеть, это то, что IE не показывал сплошные стрелочные головки для некоторых ссылок, и это можно было легко решить, просто установив стили заливки для этих типов маркеров.

marker#suit {
  fill: black;
}
marker#resolved {
  fill: black;
}

UPDATE:

Посмотрев на изображения, которые вы добавили, это определенно не то, что я вижу в IE9 или NetRenderer версии IE10. Вы пробовали на нескольких компьютерах? Возможно, это что-то специфическое для вашей настройки?

Сложно делать предложения, не имея возможности воспроизвести проблему, но одна вещь, которую вы, возможно, захотите попробовать, устанавливает свойства пути непосредственно в SVG, а не через CSS.

Итак, в первом элементе g у вас будет что-то вроде этого:

<g fill="none" stroke-width="1.5px" stroke="#666">

Здесь пример codepen, используя статическую версию разметки. И здесь полный URL-адрес, если вы хотите протестировать его в NetRenderer самостоятельно.

Даже если это не идеальное решение, по крайней мере было бы полезно знать, имеет ли это значение.