D3 rotated text : smoothing in Chrome?

d3 rotate text
d3 axisbottom rotate text
d3 rotate text around center
d3 text
d3 text wrap
d3 axis orientation
d3 v4 rotate
css text-rendering smooth

I've created a D3 pie chart and have rotated the text labels to flow radially outward. This looks good on IE, but unfortunately in Chrome the text looks horrible. CSS webkit font smoothing tricks don't seem to work. I'm guessing this needs to be done in SVG/D3 land...? Chrome just doesn't want to cooperate.

The full code is at this fiddle: http://jsfiddle.net/mn5bT/2/

I append the text labels in this manner:

g.append("text")
.attr("transform", function(d) {
var c = arc.centroid(d),
    x = c[0],
    y = c[1],
    h = Math.sqrt(x*x + y*y); // pythagorean theorem
    flipAngle = d.endAngle > Math.PI;
    angleOffset = flipAngle? 90:-90;
    return "translate(" + (x/h * radius) +  ',' + (y/h * radius) +  ")" +
            "rotate(" + (angleOffset + 180*(d.endAngle + d.startAngle)/2/Math.PI) + ")";
})
.attr("dy", ".35em")
.attr("text-anchor", function(d) {
    // are we past the center?
    return (d.endAngle + d.startAngle)/2 > Math.PI ? "end" : "start";
})
.text(function(d) { return d.data.value.campus; });

You can try to "hand anti-alias" your text by adding a blur filter. It looks a little better on Chrome.

var defs = svg.append("defs");
var filter = defs.append("filter")
    .attr("id", "drop")
    .attr("height", "130%");

filter.append("feGaussianBlur")
    .attr("in", "SourceGraphic")
    .attr("stdDeviation", .5)
    .attr("result", "blur");

filter.append("feOffset")
    .attr("in", "blur")
    .attr("dx", 0)
    .attr("dy", 0)
    .attr("result", "offsetBlur");

var feMerge = filter.append("feMerge");

feMerge.append("feMergeNode")
    .attr("in", "offsetBlur")
feMerge.append("feMergeNode")
    .attr("in", "SourceGraphic");

Thanks to cpbotha's original example. live fiddle: http://jsfiddle.net/ey8Xp/

How to rotate the text labels for the x Axis of a , How to rotate the text labels for the x Axis of a d3.js graph Now, I'll put a bit of a caveat on this solution to the rotating axis label problem. Chrome 32. Smoothing out the lines in d3.js � Adding a title to your d3.js graph. How to rotate the text labels for the x Axis of a d3.js graph The following post is a portion of the D3 Tips and Tricks document which it free to download. To use this post in context, consider it with the others in the blog or just download the pdf and / or the examples from the downloads page :-)

You can set special properties for SVG text, in particular text-rendering should be of interest. Your example looks much better to me when I add

text {
  text-rendering: geometricPrecision;
}

to the CSS.

text-rendering, The text-rendering property in CSS allows you to choose quality of text over speed (or vice Chrome has various, including letter-spacing. <text> element is used to draw text. Declaration. Following is the syntax declaration of <text> element. We've shown main attributes only. <text x="x-cordinates" y="y-cordinates" dx="list of lengths" dy="list of lengths" rotate="list of numbers" textlength="length" lengthAdjust="spacing" > </text>

From Improving font rendering with CSS

I did some research and it turned out that Windows doesn’t apply much anti-aliasing to text in most cases. Good news is that in Microsoft’s latest browsers things actually look quite good: font rendering is much much better compared to Chrome and Firefox.

shape-rendering, To achieve crisp edges, the user agent might turn off anti-aliasing for all lines and curves or possibly just for straight lines which are close to vertical or horizontal. shape-rendering, Chrome ? <font> � <font-face> � <font-face-format> � <font- face-name> � <font-face-src> � <font-face-uri> � <foreignObject>. G. The SVG tspan element defines a subtext within a text element or another tspan element. It allows for adjustment of the style and/or position of that subtext as needed.

Text — SVG 2, SVG text supports international text processing needs such as: horizontal and vertical orientation of text,; left-to-right or bidirectional text (i.e., languages which� In the above example, we defined a d3.pie() object and provided our data to the pie function. This function calculated certain fields for the pie chart like startAngle and endAngle along with the data values. d3.arc() The d3.arc() generates an arc. These are the paths that will create our pie's wedges. Arcs need an inner radius and outer radius.

Interactive text rotation with d3.js, This is a simple example of implimenting an HTML input using a <range> input tag and using that to adjust a d3.js drawn svg element (rotate� The font-weight attribute refers to the boldness or lightness of the glyphs used to render the text, relative to other fonts in the same font family.. Note: As a presentation attribute, font-weight can be used as a CSS property.

Improving Font Rendering With CSS | by Mate Marschalko, Without and with antialiasing. This will work nicely on Chrome, Safari, and Firefox on a Macintosh computer. If your text is a bit too thin and� The text-anchor attribute is used to align (start-, middle- or end-alignment) a string of pre-formatted text or auto-wrapped text where the wrapping area is determined from the inline-size property relative to a given point.

Comments
  • Is this on windows? On linux Chrome v31.0.1650.8-dev the text labels in jsfiddle.net/mn5bT/2 are drawn smoothly (with antialiasing). There is some wonkiness with the baseline alignment though (separate issue).
  • Yes the text jagginess I see is with Chrome 30.0.1599.69m running on Win8. Also tried 32.0.1664.3 dev-m Aura and the jagginess is still there. Looks like a Chrome/Win specific bug.
  • I think crbug.com/25541 might be the thing for you.
  • Wow that's a long-running thread! Looks like the fix has been put in as a "runtime enabled feature", but I haven't figured out what flag enables it. chrome://flags/#enable-experimental-webkit-feaures
  • Note that this will probably make the text look less crisp when that bug gets fixed.
  • Yes, this is a total hack
  • Nice one Michael. Hack or not, it does the job. I wouldn't have been able to figure this out myself. Would you mind sharing a link on how to make filters? Has the text jagginess been reported officially as a bug, and is anyone at Google working on it?
  • docs.webplatform.org/wiki/svg/elements/filter is the main webplatform page. I did a filter tutorial for html5devconf that you can read here: slideshare.net/mullany1/svg-filters-html5-devconf-apr-2013
  • Fantastic. Thank you!
  • Thanks for the quick response! I added that to the CSS but it still looks bad in Chrome 30.0. For a comparison, try viewing it in IE for how smooth it should look.
  • It may be the case that it doesn't work well in that particular version of Chrome. You can also try some of the other values to see if that improves it.
  • This solution greatly improves rendering in Firefox. IE already looks great by default. But chrome 56 doesn't seem to react to this at all. :(