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 ...