IE9: d3_style_prototype.setProperty occasionally throwing exceptions on svg elements

[JamesMcGuigan]

Javascript Exception affects IE9 (Win7 under VMware Fusion)

Exception:
SCRIPT87: Invalid argument.
d3.js, line 41 character 9

  if (d3_document) {
    try {
      d3_document.createElement("DIV").style.setProperty("opacity", 0, "");
    } catch (error) {
      var d3_element_prototype = this.Element.prototype, d3_element_setAttribute = d3_element_prototype.setAttribute, d3_element_setAttributeNS = d3_element_prototype.setAttributeNS, d3_style_prototype = this.CSSStyleDeclaration.prototype, d3_style_setProperty = d3_style_prototype.setProperty;
      d3_element_prototype.setAttribute = function(name, value) {
        d3_element_setAttribute.call(this, name, value + "");
      };
      d3_element_prototype.setAttributeNS = function(space, local, value) {
        d3_element_setAttributeNS.call(this, space, local, value + "");
      };
      d3_style_prototype.setProperty = function(name, value, priority) {
        d3_style_setProperty.call(this, name, value + "", priority); // LINE 41
      };
    }
  }

The following is a test script which reproduces this bug:

• https://edgefolio.com/assets/js/visualizations/industry-distribution.js

A bit of googling and old discussion thread highlighted a similar past issue and potential fix

• https://groups.google.com/d/msg/d3-js/7awvxpTxPnY/Z77WSKb8w5oJ

This was the problem:
IE9: SVG text-anchor uses: "start, "middle", and "end"
... not "left" and "right"
see: http://www.w3.org/TR/SVG/text.html#AlignmentProperties

I have created a slightly hacky workaround, as a javascript snippit to be inserted before d3.js is loaded. Not extensively tested, and there may be a far more elegant solution available, but this was sufficient to get this successfully chart rendering on IE9.

(function() {
  var d3_style_prototype   = this.CSSStyleDeclaration.prototype;
  var d3_style_setProperty = d3_style_prototype.setProperty;
  d3_style_prototype.setProperty = function(name, value, priority) {
    try {
      d3_style_setProperty.call(this, name, value + "", priority);
    } catch(exception) {
      console.warn("d3_style_prototype.setProperty - name: ", name, ", value: ", value, ", priority: ", priority, ", exception: ", exception);
      switch(name) {
        case    'left':  name = 'start';  break;
        case    'right': name = 'end';    break;
        default:         name = 'middle'; break;
      }
      d3_style_setProperty.call(this, name, value + "", priority);
    }
  };
})();

[mbostock]

Yes, IE9 throws an error sometimes if you try to set an invalid style property. This is one of IE9’s quirks, and since D3 is not a compatibility layer, you’ll need to avoid invalid values when setting style properties.