Ruta de texto SVG en Power BI Visuals: falla en Firefox / Edge

Un usuario Pregunto ✅

tomhawley

Después de algunas pruebas en varios navegadores, descubro que las rutas de texto SVG parecen romperse en los elementos visuales personalizados de Power BI, al menos en las versiones recientes de Firefox o Edge. Funcionan bien en Chrome reciente y no tan reciente, así como en IE11.

El código en JSFiddle a continuación funciona correctamente en Firefox, mostrando «hola» a lo largo de la ruta y demostrando que el navegador maneja la funcionalidad, sin embargo cerca del código equivalente que se puede compilar directamente en Power BI DevTools muestra el texto sentado en 0,0, desconectado del camino. Sin embargo, en Chrome, aparece como en JSFiddle.

https://jsfiddle.net/tg5nh2ox/1/

IVisual:

module powerbi.visuals {

    export class newVisual implements IVisual {
        public static capabilities: VisualCapabilities = {
            dataRoles: [
                {
                    name: "Category",
                    kind: VisualDataRoleKind.Grouping
                },
                {
                    name: "Y",
                    kind: VisualDataRoleKind.Measure
                }
            ],
            dataViewMappings: [{
                categorical: {
                    categories: {
                        for: { in: "Category" }
                    }
                }
            }]
        };

        private root: D3.Selection;
        private gCont: D3.Selection;

        public init(options: VisualInitOptions): void {
            
            options.viewport.width=500;
            options.viewport.height=500;
            
            this.root = d3.select(options.element.get(0))
                .append('svg')
                .attr("width", options.viewport.width)
                .attr("height", options.viewport.height);

            this.gCont = this.root
                .append("g")
                .attr("transform", "translate(50,50)");
                
            var line = d3.svg.line()
              .x(function(d) {
                return d.x;
              })
              .y(function(d) {
                return d.y;
              }).interpolate("linear");

            this.gCont
              .append("path")
              .style("stroke", "black")
              .attr("id", "pathid")
              .attr("d", function() {
                return line([{"x": 100, "y": 100}, {"x": 200, "y": 150}]);
              });
            
            this.gCont
              .append("text")
              .append("textPath")
              .text("hello")
              .attr("xlink:href", "#pathid");
    }

        public update(options: VisualUpdateOptions) {}
        public destroy() {}
    }
}

¿He olvidado configurar algo que está causando este problema o se trata de una incompatibilidad genuina que no se puede superar actualmente?

Nota: soy consciente del error que requiere que xlink: href se restablezca constantemente durante una transición, que existe en mi código más complejo con animación y funciona en Chrome, etc., no ayuda con este problema .

tomhawley

Este tema está progresando un poco en los comentarios sobre Stack Overflow. Tengo curiosidad por saber si otros desarrolladores se han encontrado con esto. Pensé que la gente curvaría el texto por todas partes en estas imágenes, pero supongo que cuando miro la galería, veo a personas que se detienen en lo normal. etiquetas con transformación y rotación. A primera vista, parece que href no se puede usar para vincular una ruta de texto a una ruta en este momento, aunque me pregunto si el sandboxing resolverá esto eliminando / base del contexto de lo visual. No hay tiempo para probar eso todavía.

http: //stackoverflow.com/questions/36265323/svg-text-path-in-power-bi-visuals-failing-in-firefox-edg …

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *