Wrapping Text within an Arc

15 views
Skip to first unread message

Rachel Rinaldi

unread,
Jan 5, 2018, 3:12:22 PM1/5/18
to d3-js
I can't seem to figure out how to wrap text within the arcs of my chord diagram with this code solution. It does not seem to be able to grab the x2 and y2 coordinates of each of my paths. 

When I implement the call to wrap the text, I end up with the error:

Cannot read property 'split' of undefined

 For some reason, I can't pick up the proper path coordinates of my TextPaths and therefore, the newEnd variable is undefined. I would appreciate any guidance!

        textPath = text.text(null).append("textPath") // Add a textPath element
            .attr("startOffset", '50%')
            .style("text-anchor", "middle")
            .attr("xlink:href", function(d,i) { return "#SuperCategory" + i; }),
        tspan = textPath.append('tspan'), // Inslide textPath, add a tspan element, for offset feature later.
        path = d3.select(text.select('textPath').attr('xlink:href')); // Get the path to compute width of text later.

        
        var startLoc = /M(.*?)A/;
    var newStart = path.attr('d').match(startLoc)[1];
    var newEnd = path.attr('d').indexOf(' 0 0 0 ') > -1 
        ? path.attr('d').split(' 0 0 0 ')[1] 
        : path.attr('d').split(' 0 0 1 ')[1] ;

    // Compute the start/end coordinate points of the arc that the text will follow.
    var x1 = parseFloat(newStart.split(' ')[0]),
        y1 = parseFloat(newStart.split(' ')[1]),
        x2 = parseFloat(newEnd.split(' ')[0]),
        y2 = parseFloat(newEnd.split(' ')[1]);


Reply all
Reply to author
Forward
0 new messages