Internet Explorer 6,7,8 about d3

[mbostock]

Selector support can be added with Sizzle! I'd like it to be optional—if you include Sizzle (before loading D3) then it enables backwards-compatibility via Sizzle, and otherwise it requires the native methods.

The funny thing about the slice error is that I'm guessing it's occurring in d3_array, which is already a compatibility routine for converting psuedo-arrays to true arrays. So, it's a shame that's not working. I wonder if the native methods work if they take psuedo-arrays as arguments rather than as this, say:

var array = [];
array.push.apply(array, psuedoarray);
return array;

Of course, this probably isn't a good idea because there is a limit to the total number of arguments you can pass to a method. (I think around 10,000.) So you could do something like concat:

return [].concat(psuedoarray);

But it turns out that doesn't work for psuedo-arrays (like arguments), because the concat routine's type-inspection for array arguments fails for psuedo-arrays. /facepalm The funny thing is my original version is based on Mozilla's recommendation, so I'm surprised it doesn't actually work cross-browser:

https://developer.mozilla.org/en/JavaScript/Reference/functions_and_function_scope/arguments

Alternatively, since it's pretty simple, we could do it manually. But then it's slower for the modern browsers:

var i = -1,
    n = psuedoarray.length,
    array = [];
while (++i < n) array.push(psuedoarray[i]);
return array;

Actually, maybe it's not slower, at least for some browsers:

http://jsperf.com/arguments-slice

[jasondavies]

Cool, I didn't realise D3 supported Sizzle already!

Here's some more info on the error I was getting, namely JScript Object Expected. It seems that it's implementation-dependent as to whether "host objects" work with this or not.

The good thing is, it seems Sizzle has already encountered this problem as they detect it and provide a fallback:
var makeArray = function( array, results ) {
array = Array.prototype.slice.call( array, 0 );

  if ( results ) {
    results.push.apply( results, array );
    return results;
  }

  return array;
};

// Perform a simple check to determine if the browser is capable of
// converting a NodeList to an array using builtin methods.
// Also verifies that the returned array holds DOM nodes
// (which is not the case in the Blackberry browser)
try {
  Array.prototype.slice.call( document.documentElement.childNodes, 0 )[0].nodeType;

// Provide a fallback method if it does not work
} catch( e ) {
  makeArray = function( array, results ) {
    var i = 0,
      ret = results || [];

    if ( toString.call(array) === "[object Array]" ) {
      Array.prototype.push.apply( ret, array );

    } else {
      if ( typeof array.length === "number" ) {
        for ( var l = array.length; i < l; i++ ) {
          ret.push( array[i] );
        }

      } else {
        for ( ; array[i]; i++ ) {
          ret.push( array[i] );
        }
      }
    }

    return ret;
  };
}

[mbostock]

I haven't plugged in Sizzle support just yet, but that's the plan. I'd love your help if you have the time and are willing!

[jasondavies]

Would love to, watch this space...

[mbostock]

Just added Sizzle support in 1.0.0. Still need to fix the slice exception, though.

[jasondavies]

Cool, 1.0.0! Sorry I didn't get a chance to add Sizzle in myself :)

What do you think about copying the Sizzle code above to fix the slice exception? It uses Array.prototype.slice if possible so there wouldn't be any performance degradation in the browsers currently supported. The fallback seems a bit gnarly due to using toString to detect an Array, but at least it's a starting point. Also, the mention of Blackberry in the comment makes me think they've tested this stuff pretty extensively, which is encouraging!

[mbostock]

Yep, I'd support that change!

[mbostock]

Fixed in 1.0.2.

[mh777]

Version 1.17.1 is not working in IE8 any more.
Array.map is not available. Workaround at https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/array/map
createElementNS ist not available. Workaround probably is to use createElement instead.

[jeffpflueger]

What is the current status of this issue?
I'm getting "Object doesn't support this property or method" with IE8 in d3.js 2.4.2 line 1525:
return this.appendChild(document.createElement.........

when I run the bullet charts example from the d3.js homepage.
What is the history of development of d3 running on IE<9? Plans for future?

[mbostock]

The current status is this issue is closed. :) There are no plans to support IE8-, as it doesn't have SVG. If someone submitted a pull request which had minimal impact (in terms of code complexity or performance) then I would be willing to merge it to support IE8-, but I have no plans to find and fix these bugs myself.

[lailsonbm]

Did anyone experiment using it with svgweb in IE 8-?

[mark-rushakoff]

@lailsonbm We just ran through this at work this week. svgweb is a nice drop-in solution for SVG, but d3 definitely isn't out-of-the-box compatible with IE even there. Array.map is the first thing to break, and once you polyfill that, there are some appendChild things that stop working, but svgweb fixes those. After that, we started running into code that just wasn't IE compatible.

My assessment is that it's likely possible to get d3 running under IE8, but it's not a trivial amount of work.

[lailsonbm]

@mark-rushakoff I see your point. Thanks for the response.

[mhemesath]

I managed to get most of the d3 functionality working in IE using Raphael to handle rendering under svg element selections. Basically I added DOM API's that D3 expects to be present on raphael elements and the paper object. This allows d3 to create selections around Raphael objects without modifying much of D3 at all. In fact, I reference tagged releases of D3 and build out r2d3 by modifying only selection-append and selection-text modules.

I'd love any feedback anyone might have. The goal is that when IE8 support is no longer needed, a user can flip back to D3 with little to no code modifications.

Currently the only major features missing that I'm aware of are the group element and styling via css. You can check out the project here: https://github.com/mhemesath/r2d3