When I used a function to wrap y axis labels Points no longer lining up

[Anonymous]

This is what our custom visualization looks like ... with the word wrap

  I  am still learning on all this ... 

    You can see the more labels that we wrap the more unaligned it becomes.  We are applying a wordwrap function to the label during the code ...  

the wordwrap function we found on several d3..   ( I copied it below ) ... 

Is there a better way , or how do you compensate when you are plotting points when you have word wrap and can be multiple lines 

  this.yAxis.attr('transform', 'translate(' + ScatterChart.Config.margins.left + ', 0)')
      //Set the font size based upon the size of the container
     .style('font-size', function () { return d3.min([height, width]) * ScatterChart.Config.axisFontMultiplier + "px" })
     .attr('class', 'y axis')
      .call(yAxis)
     //THIS IS THE WORDWRAP PIECE>>>>>>>
    .selectAll("text")
    .call(this.wrap, ScatterChart.Config.margins.left - 50);

    .attr("transform", function (d) { return "translate(" + xScale(d.category) + "," + yScale(d.band) + ")"; })

   the above I believe is how we are deciding where to plot ... so I think I have to do something to the yscale... 

 I modified the wrap to subtract from the x margin , to allow the labels to not be right at the axis line.  I had tried the text-anchor function with start , and it did no do anything , so this worked ... not best solution ..   wrap does not work in focus mode

 private wrap(text, width) {
            text.each(function () {
                var text = d3.select(this),
                    words = text.text().split(/\s+/).reverse(),
                    word,
                    line = [],
                    lineNumber = 0,
                    lineHeight = 1.1,  // 1.1 , // ems
                    y = text.attr("y"),
                    dy = parseFloat(text.attr("dy")),
                    tspan = text.text(null).append("tspan").attr("x", -20).attr("y", y).attr("dy", dy + "em");
                while (word = words.pop()) {
                    line.push(word);
                    tspan.text(line.join(" "));
                    var node: SVGTSpanElement = <SVGTSpanElement>tspan.node()
                    //This computes the pixel length.
                    var bandPixLength = node.getComputedTextLength()
                    //alert(tspan.text())
                    if (bandPixLength > width + 10) {
                        line.pop();
                        tspan.text(line.join(" "));
                        line = [word];
                        //   lineHeight =  2 ; 
                        tspan = text.append("tspan").attr("x", -20).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word);
                    }
                }
            });
        }
    }
}

   Any ideas , on how to match the plotted y points to center when labels are word wrapped ...  

[v-chuncz-msft]

@Anonymous,

You may try to use CSS3 word-wrap property or a percent value.