Si abro este gráfico, por ejemplo: http://bl.ocks.org/mbostock/1153292
en IE10, simplemente no puedo ver los enlaces entre los nodos.

Hay algo que yo pueda hacer en el código para que sea posible ver incluso con Internet Explorer?

Parece IE simplemente ignorar algunas de las piezas de la svg… yo no podía encontrar alguna manera para que sea visible.

  • ¿Has probado la depuración en IE10? ¿Qué significa el error de la consola de decir? Son la ruta de los nodos y en el svg espacio de nombres? Son los que contienen formateado correctamente los datos de la ruta?
  • ¿Cómo puedo depurar en IE?
  • Presione F12, o elija «herramientas de desarrollo F12» desde el menú que aparece después de pulsar el icono de herramientas en la esquina superior derecha de IE10. A continuación, elija el «Guión» de la etiqueta y presione el botón «Iniciar depuración» en la nueva ventana que se abre. (Este es el uso de Windows 7.)
  • Este problema es también para IE 11
InformationsquelleAutor Letterman | 2013-03-23

3 Comentarios

  1. 29

    Resumen:

    Hay un error en IE que hace que las rutas con marcadores para representar incorrectamente. El código original con marcadores eliminado hace sin problema.

    Hay tres soluciones:

    1. No utilice marcadores
    2. Incrustar los marcadores en la ruta como esta: http://jsfiddle.net/niaconis/3YsWY/9/
    3. Esperar a Microsoft para solucionar este bug

    La opción 2, aunque un poco feo, es probablemente la más viable.


    Post Original:

    Por desgracia, me he encontrado la respuesta de Santiago sólo funciona para la estática svg.

    Me sacó el css y javascript en el ejemplo original y los colocó en jsfiddle. Los enlaces que se muestran correctamente en Chrome 26 (este era mi tipo de prueba de control), pero no se muestran en IE 10 (como se esperaba). Luego he editado el código javascript que se trató de la creación de los enlaces de acuerdo a la respuesta de James dio:

    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 + ")"; });

    Esto hizo que añadir los atributos especificados para el <g> elemento, pero no tuvo ningún efecto en la pantalla de la página «live» del gráfico. (Revise de nuevo ahora, me he dado cuenta de la «estática» gráfico muestra los enlaces en IE10 incluso sin estos atributos, como se ha visto aquí.)

    Yo era capaz de hacer los enlaces visibles en IE10 (incluso directamente en el ejemplo original) mediante el uso de IE developer toolbar. He encontrado uno de los <path> etiquetas en el DOM, a continuación, en la ficha Estilo a la derecha sin marcar y volver a revisar la ruta».enlace» estilo.

    Esto se pone los enlaces para mostrar, pero cualquier interacción posterior con el gráfico desconecta los marcadores de los extremos de los enlaces. Ellos simplemente permanecer en el lugar, y me he encontrado nada de lo que va a conseguir que vuelva a conectar.

    La única fuente de información que puedo encontrar que parece relevante es esto ASÍ que el post: Elemento no aparece en IE7 hasta que editarlo a través de la Barra de herramientas de desarrollo

    Sin embargo, soy bastante nuevo en svg, por lo que no tengo la menor idea de cómo puerto de la revisión que se describe allí para svg (que la corrección de un elemento html)

    Tal vez esto ayude a alguien a obtener en la dirección correcta?

    P. S. sé que esto no es exactamente una respuesta, y me habría acaba de publicar esto como una respuesta a la respuesta de Santiago, pero parece que no tengo suficiente reputación para hacer eso. =\


    Actualización:

    Resulta que este problema está relacionado con completo a los marcadores. Este violín es el código original pero con marcadores eliminado, y los enlaces que se muestran bien. El marcador problema ha sido documentado antes de la y es un grave error de IE10. Por qué también hace que los enlaces a desaparecer, no sé.

    Este violín ofrece una solución alternativa. No es la solución más limpia como he codificado cada marcador directamente en el enlace de la ruta, pero funciona.

    Si alguien puede encontrar una solución para el marcador de la cuestión en sí, que sería mejor, y que, además, debe ser publicado como una respuesta a la otro marcador pregunta.

    (Tenga en cuenta también: Mi solución hace discontinua enlaces de aspecto terrible, así que me he hecho a la luz azul en su lugar.)

    Este error ha sido reportado a Microsoft, pero hasta el momento no parecen tener negado o ignorado ella. Por favor, vaya a este post de Microsoft issue tracker sitio web y haga clic en el enlace que indica que usted puede reproducir este error. Tal vez podamos obtener su atención?

    • Yo no sé acerca de la OP, pero este fue sin duda útil para mí. Y con la cantidad de información que ha proporcionado, es mejor por separado como una respuesta de todos modos, porque hay un límite a lo que puedes poner en los comentarios. +1
    • Se me ocurrió buscar una solución que funciona… algo. Echa un vistazo a este violín. Todavía tiene el incorpóreo marcador problema, pero los enlaces son visibles. (También, a Santiago, me alegra que la información te sea útil. Yo no sabía que había un límite ya que no había tenido la oportunidad de formular comentarios antes.)
    • Yo actualmente no tienen acceso a un sistema con IE10, y nunca puedo conseguir javascript para trabajar con NetRenderer que es la razón por la que he estado probando con la estática de marcado. Pero ya que el problema parece ser js relacionadas, con base en los hallazgos, que explica por qué no puedo reproducir. Desafortunadamente, esto también significa que no puede confirmar su solución.
    • Esto se ve prometedor, gracias. Si sólo las flechas podrían ser conectados a los bordes con mucho gusto le premio de la recompensa.
    • Me las he arreglado para conseguir algo parecido a lo que debería ser. Comprobar mi respuesta actualizada para la vuelta.
    • Su solución es increíble, muchas gracias por su ayuda. Disfrute de la recompensa!
    • Esto es fantástico. Estoy tratando de hacer lo mismo para las líneas rectas con marcadores en el centro de la línea, pero la «magia» de los números en algunas de sus fórmulas parecen ser para la alineación con arcos y yo no se burlan de él hacia fuera. Cualquier ayuda se agradece.
    • He aquí un ejemplo de poner marcadores cuadrados en el medio de líneas rectas. Las fórmulas que se utiliza debe ser un poco más fácil de digerir. Quiero saber si vale de ayuda.
    • Gracias! Me las arreglé para llegar con una solución similar en el mío propio, una vez que me había golpeado la herrumbre de mi trigonometría habilidades!
    • Gran solución! He intentado cambiar el radio del círculo mediante la sustitución de todas las instancias de 6 con una variable, pero parece que rompe la flecha de posición y orientación. Cualquier ayuda será apreciada. Gracias!

  2. 11

    La otro marcador pregunta tiene una excelente respuesta por Christian Lund, que ha trabajado para mí muy bien.

    Para ahorrarle la molestia de ir allí, he aquí la esencia de las cosas:

    En mi la fuerza de animación, tengo un tick función que tiene este aspecto:

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

    También los tengo todos los de mi gráfica de los vínculos dentro de la link variable, que se define así:

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

    Ahora, para implementar la magia sugerido por Christian, he añadido esta línea en el comienzo de mi tick función:

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

    Dejé todos mis marcadores intacta. Lo que este pequeño pedazo de maravilla, es ir por encima de todos el enlace de los nodos de cada garrapata de la animación, y volver a añadirlos a la DOM. Esto hace que IE 10 para volver a hacerlos, y todo está bien con el mundo.

    Esto parece solucionar el IE 10 problemas… por supuesto se recomienda añadir este parche sólo en IE 10

    Si esto funciona para usted no se olvide de ir a la otra pregunta y darle Cristiana un upvote

    • Genial, funciona en IE 10 y IE11
  3. 0

    No estoy seguro de si esto ha sido resuelto ya, pero el gráfico se ve casi idéntico a mí en todos los navegadores que he comparado. No tengo IE10, pero se ve bien en IE9 y he probado una copia estática de la gráfica en NetRenderer del IE10 y que se veía muy bien también.

    La única diferencia que pude ver es que el IE no muestran un sólido cabezas de flecha para algunos de los enlaces, y que podrían ser fácilmente resueltos sólo mediante la configuración de los estilos de relleno para los tipos de marcador.

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

    ACTUALIZACIÓN:

    Mirando las imágenes que has añadido, que definitivamente no es lo que yo estoy viendo en IE9 o NetRenderer la versión de IE10. ¿Has probado en varios equipos? Es quizás algo específico para su instalación?

    Es difícil hacer sugerencias sin ser capaz de reproducir el problema, pero una cosa que usted podría querer intentar, es la configuración de las propiedades de la ruta directamente en el SVG en lugar de a través de la CSS.

    Así, en la primera g elemento que tendría algo como esto:

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

    Aquí un codepen ejemplo utilizando una versión estática de la marca. Y aquí está el fullpage url si quieres probarlo en NetRenderer ti mismo.

    Incluso si eso no es una solución ideal, que al menos sería útil saber si hay alguna diferencia.

Dejar respuesta

Please enter your comment!
Please enter your name here