Aligning x position of tspan in IE11 using d3.js-CodePudding

The

In IE:

As you can see in IE11 the first <tspan> isn't anchored to the middle. I've tried a combination of things with and without the x attribute, dx manipulation. I have lined them up via the dx attribute but as each set of labels have different lengths the math isn't the same for each.

The svg structure is as follows:

<text id="edgelabel0" font-size="10" style="text-anchor: middle;"> <textPath xlink:href="#edgepath0" dominant-baseline="middle" startOffset="50%" style="cursor: pointer;"> <tspan dx="0">label one</tspan> <tspan x="0" dy="22" dx="0">label two</tspan> <tspan x="0" dy="22" dx="0">label three</tspan> </textPath> </text>

You can see above in this particular implementation I intentionally left out the x attribute for the first tspan.

This is the code that renders the above:

const edgelabels = zoomContainer .selectAll('.edgelabel') .data(links) .enter() .append('text') .attr('class', 'edgelabel') .style('text-anchor', 'middle') .attr('id', function (d, i) { return 'edgelabel' i; }) .attr('font-size', 10); edgelabels .append('textPath') .attr('xlink:href', function (d, i) { return '#edgepath' i; }) .style('cursor', 'pointer') .attr('dominant-baseline', 'middle') .attr('startOffset', '50%') .selectAll('div.textPath') .data(function (d, i) { return d.label; }) .enter() .append('tspan') .attr('class', 'edgelabels') .text(function (d, i) { return console.log(d), d; }) .attr('x', function (d, i) { if (i > 0) { return 0; } }) .attr('dy', function (d, i) { if (i > 0) { return 22; } }) .attr('dx', 0);

Has anybody else had this issue, can you see anything wrong? Is there anything else I could try to get a consistent dx attribute for each set of labels? Could I restructure the code to get a better result?

Complete file code:

import { Injectable } from '@angular/core'; import * as d3 from 'd3'; @Injectable({ providedIn: 'root', }) export class DirectedGraphExperimentService { constructor() {} /** A method to bind a zoom behaviour to the svg g element */ public applyZoomableBehaviour(svgElement, containerElement) { let svg, container, zoomed, zoom; svg = d3.select(svgElement); container = d3.select(containerElement); zoomed = () => { const transform = d3.event.transform; container.attr( 'transform', 'translate(' transform.x ',' transform.y ') scale(' transform.k ')' ); }; zoom = d3.zoom().scaleExtent([0.5, 1]).on('zoom', zoomed); svg.call(zoom).style('cursor', 'move'); } private clearView(svg) { return svg.selectAll('*').remove(); } private ticked(link, node, edgepaths, edgelabels) { link .attr('x1', function (d) { return d.source.x; }) .attr('y1', function (d) { return d.source.y; }) .attr('x2', function (d) { return d.target.x; }) .attr('y2', function (d) { return d.target.y; }); node.attr('transform', function (d) { return 'translate(' d.x ', ' d.y ')'; }); edgepaths.attr('d', function (d) { return ( 'M ' d.source.x ' ' d.source.y ' L ' d.target.x ' ' d.target.y ); }); edgelabels.attr('transform', function (d) { if (d.target.x < d.source.x) { let bbox = this.getBBox(); let rx = bbox.x bbox.width / 2; let ry = bbox.y bbox.height / 2; return 'rotate(180 ' rx ' ' ry ')'; } else { return 'rotate(0)'; } }); } private dragended(d3, d, simulation) { if (!d3.event.active) simulation.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; } private initDefinitions(svg) { svg .append('defs') .append('marker') .attr('id', 'arrowhead') .attr('viewBox', '-0 -5 10 10') .attr('refX', 27) .attr('refY', 0) .attr('orient', 'auto') .attr('markerWidth', 8) .attr('markerHeight', 8) .attr('xoverflow', 'visible') .append('svg:path') .attr('d', 'M 0,-5 L 10 ,0 L 0,5') .attr('fill', '#999') .style('stroke', 'none'); return svg; } private forceSimulation(d3, { width, height }) { return d3 .forceSimulation() .force( 'link', d3 .forceLink() .id(function (d) { return d.id; }) .distance(500) .strength(2) ) .force('charge', d3.forceManyBody()) .force('center', d3.forceCenter(width / 2, height / 2)); } private _update(d3, svg, data) { let { links, nodes } = data; // this.clearView(svg); // removes everything! this.initDefinitions(svg); const simulation = this.forceSimulation(d3, { width: svg.attr('width'), height: svg.attr('height'), }); const zoomContainer = d3.select('svg g'); const link = zoomContainer .selectAll('.link') .data(links) .enter() .append('line') .style('stroke', '#999') .style('stroke-opacity', '.6') .style('stroke-width', '2px') .attr('class', 'link') .attr('marker-end', 'url(#arrowhead)'); link.append('title').text(function (d) { return d.label; }); const edgepaths = zoomContainer .selectAll('.edgepath') .data(links) .enter() .append('path') .attr('class', 'edgepath') .attr('fill-opacity', 0) .attr('stroke-opacity', 0) .attr('id', function (d, i) { return 'edgepath' i; }); const edgelabels = zoomContainer .selectAll('.edgelabel') .data(links) .enter() .append('text') .attr('class', 'edgelabel') .style('text-anchor', 'middle') .attr('id', function (d, i) { return 'edgelabel' i; }) .attr('font-size', 10); edgelabels .append('textPath') .attr('xlink:href', function (d, i) { return '#edgepath' i; }) .style('cursor', 'pointer') .attr('dominant-baseline', 'middle') .attr('startOffset', '50%') .selectAll('div.textPath') .data(function (d, i) { return d.label; }) .enter() .append('tspan') .attr('class', 'edgelabels') .text(function (d, i) { return console.log(d), d; }) .attr('x', function (d, i) { if (i > 0) { return 0; } }) .attr('dy', function (d, i) { if (i > 0) { return 22; } }) .attr('dx', 0); svg.selectAll('.edgelabel').on('click', function () { // arrow function will produce this = undefined d3.selectAll('.edgelabel').style('fill', '#999'); d3.select(this).style('fill', 'blue'); }); const node = zoomContainer .selectAll('.node') .data(nodes) .enter() .append('g') .attr('class', 'node') .call( d3 .drag() .on('start', (d) => this.dragended(d3, d, simulation)) .on('drag', function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; }) .on('end', (d) => this.dragended(d3, d, simulation)) ); node .append('circle') .style('fill', '#fff') .style('cursor', 'pointer') .style('fill-opacity', '1') .style('stroke-opacity', '0.5') .attr('id', (d, i) => d.id) .attr('r', 28); svg.selectAll('circle').on('click', function () { // arrow function will produce this = undefined d3.selectAll('.nodeText').style('fill', 'black'); d3.select(this.parentNode).selectAll('.nodeText').style('fill', 'blue'); }); node .append('image') .attr('xlink:href', 'https://github.com/favicon.ico') .attr('x', -10) .attr('y', -40) .attr('width', 16) .attr('class', 'image') .attr('height', 16); node .append('svg:foreignObject') .attr('class', 'delete-icon') .html('<div style="color:green;padding-left: 50px;">remove</div>') .text('delete'); const nodeText = node .data(nodes) .append('text') .style('text-anchor', 'middle') .style('cursor', 'pointer') .attr('dy', -3) .attr('y', -25) .attr('class', 'nodeText') .attr('id', 'nodeText'); nodeText .selectAll('tspan') .data((d, i) => d.label) .enter() .append('tspan') .attr('class', 'nodeTextTspan') .text((d) => d) .style('font-size', '12px') .attr('x', -10) .attr('dx', 10) .attr('dy', 22); svg.selectAll('.nodeText').on('click', function () { d3.selectAll('.nodeText').style('fill', 'black'); d3.select(this).style('fill', 'blue'); }); node.append('title').text(function (d) { return d.id; }); simulation.nodes(nodes).on('tick', () => { this.ticked(link, node, edgepaths, edgelabels); }); simulation.force('link').links(links); } public update(data, element) { const svg = d3.select(element); return this._update(d3, svg, data); } }

CodePudding user response：

Ok I figured it out. Here is the rendered SVG that works - IE11 doesn't like tspan's inside textPaths, so you have to separate each label into its own text textPath element with an appropriate dy attribute on the text element.

<svg _ngcontent-c1="" height="600" width="900" style="cursor: move;"><g _ngcontent-c1="" ng-reflect-zoomable-of="[object SVGSVGElement]"> <line marker-end="url(#arrowhead)" style="stroke: rgb(153, 153, 153); stroke-opacity: 0.6; stroke-width: 2px;" x1="609.1621195478509" y1="362.0472615717732" x2="120.80347004842467" y2="254.41514023225977"> <title>label one,label two,label three</title></line> <line marker-end="url(#arrowhead)" style="stroke: rgb(153, 153, 153); stroke-opacity: 0.6; stroke-width: 2px;" x1="620.0342472996117" y1="283.53757565928413" x2="120.80347004842467" y2="254.41514023225977"> <title>really Long Link text,tom</title> </line> <path fill-opacity="0" stroke-opacity="0" id="edgepath0" d="M 609.1621195478509 362.0472615717732 L 120.80347004842467 254.41514023225977"></path><path fill-opacity="0" stroke-opacity="0" id="edgepath1" d="M 620.0342472996117 283.53757565928413 L 120.80347004842467 254.41514023225977"></path> <text id="edgelabel0" font-size="10" style="text-anchor: middle;" transform="rotate(180 370.5402526855469 287.623779296875)" dy="0"> <textPath xlink:href="#edgepath0" dominant-baseline="middle" startOffset="50%" style="cursor: pointer;"> label one </textPath> </text> <text id="edgelabel0" font-size="10" style="text-anchor: middle;" transform="rotate(180 370.5402526855469 287.623779296875)" dy="22"> <textPath xlink:href="#edgepath0" dominant-baseline="middle" startOffset="50%" style="cursor: pointer;"> label two </textPath> </text> <text id="edgelabel0" font-size="10" style="text-anchor: middle;" transform="rotate(180 370.5402526855469 287.623779296875)" dy="44"> <textPath xlink:href="#edgepath0" dominant-baseline="middle" startOffset="50%" style="cursor: pointer;"> label three </textPath> </text> <text id="edgelabel1" font-size="10" style="text-anchor: middle;" transform="rotate(180 370.2359619140625 260.2969512939453)"><textPath xlink:href="#edgepath1" dominant-baseline="middle" startOffset="50%" style="cursor: pointer;"><tspan dx="0">really Long Link text</tspan><tspan x="0" dy="22" dx="0">tom</tspan></textPath></text><g transform="translate(609.1621195478509, 362.0472615717732)"><circle id="5678" r="28" style="fill: rgb(255, 255, 255); cursor: pointer; fill-opacity: 1; stroke-opacity: 0.5;"></circle><image xlink:href="https://github.com/favicon.ico" x="-10" y="-40" width="16" height="16"></image><foreignObject >delete</foreignObject><text dy="-3" y="-25" id="nodeText" style="text-anchor: middle; cursor: pointer;"><tspan x="-10" dx="10" dy="22" style="font-size: 12px;">Red</tspan><tspan x="-10" dx="10" dy="22" style="font-size: 12px;">BMW</tspan><tspan x="-10" dx="10" dy="22" style="font-size: 12px;">Fast</tspan></text><title>5678</title></g><g transform="translate(120.80347004842467, 254.41514023225977)"><circle id="2494EA62" r="28" style="fill: rgb(255, 255, 255); cursor: pointer; fill-opacity: 1; stroke-opacity: 0.5;"></circle><image xlink:href="https://github.com/favicon.ico" x="-10" y="-40" width="16" height="16"></image><foreignObject >delete</foreignObject><text dy="-3" y="-25" id="nodeText" style="text-anchor: middle; cursor: pointer;"><tspan x="-10" dx="10" dy="22" style="font-size: 12px;">Cool</tspan><tspan x="-10" dx="10" dy="22" style="font-size: 12px;">Brown</tspan><tspan x="-10" dx="10" dy="22" style="font-size: 12px;">Ford Cortina</tspan></text><title>2494EA62</title></g><g transform="translate(620.0342472996117, 283.53757565928413)"><circle id="123" r="28" style="fill: rgb(255, 255, 255); cursor: pointer; fill-opacity: 1; stroke-opacity: 0.5;"></circle><image xlink:href="https://github.com/favicon.ico" x="-10" y="-40" width="16" height="16"></image><foreignObject >delete</foreignObject><text dy="-3" y="-25" id="nodeText" style="text-anchor: middle; cursor: pointer;"><tspan x="-10" dx="10" dy="22" style="font-size: 12px;">Aston</tspan><tspan x="-10" dx="10" dy="22" style="font-size: 12px;">Martin</tspan></text><title>123</title></g></g><defs><marker id="arrowhead" viewBox="-0 -5 10 10" refX="27" refY="0" orient="auto" markerWidth="8" markerHeight="8" xoverflow="visible"><path d="M 0,-5 L 10 ,0 L 0,5" fill="#999" style="stroke: none;"></path></marker></defs></svg>

CodePudding user response：

Not a proper d3.js solution, but should be able to adapt/include it in your script.

Calculate centered text x/y coordinates and rotation angles according to line/graph

We're using <text> elements placed at the middle of the line/graph replacing <textpath> usage.

Get centered text anchor coordinates replacing startOffset="50%"

Since you know the line's starting and end points, we can easily interpolate a mid point like so:

let p1 = {x:x1, y:y1}; let p2 = {x:x2, y:y2}; let textAnchor = {x:(p1.x p2.x)/2, y:(p1.y p2.y)/2};

The textAnchor point coordinates will become the <text> elements new x and y atribute values.

Get rotation angle

let angle = (Math.atan2(p2.y - p1.y, p2.x - p1.x) * 180) / Math.PI;

This variable is used so set the transform rotate property according to the line's drawing angle.

// example coordinates - should come from your data object let x1 = line1.x1.baseVal.value; let x2 = line1.x2.baseVal.value; let y1 = line1.y1.baseVal.value; let y2 = line1.y2.baseVal.value; let p1 = {x:x1, y:y1}; let p2 = {x:x2, y:y2}; /** * calculte mid point on line * use LERP helper if you need to place the mid point at other positions: * e.g t=0.75 = 75% */ let textAnchor = interpolatedPoint(p1, p2, 0.5); // use this for simple centered alignment //let textAnchor = {x:(p1.x p2.x)/2, y:(p1.y p2.y)/2}; // move parent <text> element to mid point textLabel.setAttribute('x', textAnchor.x) textLabel.setAttribute('y', textAnchor.y); // add x and dy attributes to tspan for pdeudo-multiline appearance let lineHeight = parseFloat(window.getComputedStyle(textLabel).fontSize)*1.2; setTspanMultiline(textLabel, lineHeight) // rotate according to line center point let angle = getAngle(p1, p2); // svg attribute transform textLabel.setAttribute('transform', `rotate(${angle} ${textAnchor.x} ${textAnchor.y})`) // css style equivalent //textLabel.style.transform = `translate(${textAnchor.x}px, ${textAnchor.y}px) rotate(${angle}deg) translate(-${textAnchor.x}px, -${textAnchor.y}px)`; function setTspanMultiline(textEl, dy){ let tspans = textEl.querySelectorAll('tspan'); let totalDy = (tspans.length-1)*dy; let x= textEl.getAttribute('x'); tspans.forEach((tspan, i)=>{ tspan.setAttribute('x', x); if(i>0){ tspan.setAttribute('dy', dy); } }) textEl.setAttribute('dy', totalDy/-2 ) } /** * Linear interpolation (LERP) helper */ function interpolatedPoint(p1, p2, t = 0.5) { //t: 0.5 - point in the middle if (Array.isArray(p1)) { p1.x = p1[0]; p1.y = p1[1]; } if (Array.isArray(p2)) { p2.x = p2[0]; p2.y = p2[1]; } let [x, y] = [(p2.x - p1.x) * t p1.x, (p2.y - p1.y) * t p1.y]; return { x: x, y: y }; } // get angle helper function getAngle(p1, p2) { let angle = (Math.atan2(p2.y - p1.y, p2.x - p1.x) * 180) / Math.PI; return angle; }

svg{ width:50em; border:1px solid #ccc; overflow:visible; } text{ font-size:10px; }

<svg id="svg" viewBox="0 0 500 100"> <line id="line1" x1="0" x2="100%" y1="25%" y2="75%" stroke="#ccc" stroke-width="1" /> <text x="0" id="textLabel" text-anchor="middle" dominant-baseline="middle"> <tspan >line one</tspan> <tspan >line two long</tspan> <tspan >line three</tspan> <tspan >line four</tspan> </text> </svg>

In the above example I'm using the setTspanMultiline(textEl, dy) helper function to generate the correct x, y and dy values.

<text x="250" id="textLabel" text-anchor="middle" dominant-baseline="middle" y="50" dy="-18" transform="rotate(5.710593137499643 250 50)"> <tspan x="250">line one</tspan> <tspan x="250" dy="12">line two long</tspan> <tspan x="250" dy="12">line three</tspan> <tspan x="250" dy="12">line four</tspan> </text>

Basically all <tspan> inherit the x value from the parent <text> elements.
The relative dy will emulate the line height. The parent <text> dy value will vertically center the text around the line and is calculated like so:

(Total number of tspans - 1) * dy

let tspans = textEl.querySelectorAll('tspan'); let totalDy = (tspans.length-1)*dy;