After some cross-browser testing i'm finding that SVG text paths seem to break in Power BI custom visuals, at least in recent versions of Firefox or Edge. They work fine in recent and not so recent Chrome, as well as in IE11.
The code in the JSFiddle below works correctly in Firefox, displaying "hello" along the path and proving the browser handles the functionality, however close to equivalent code which can be compiled directly in Power BI DevTools shows the text sat at 0,0, disconnected from the path. In Chrome though, it appears as it does in the 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() {}
}
}Have I forgotten to set something that's causing this problem, or is this a genuine incompatibility that cannot currently be overcome?
Note - I'm aware of the bug that requires the xlink:href to be constantly re-set during a transition - that exists in my more complex code with animation, and does it's job in Chrome etc - it does not help with this issue.
