Invalid argument (IE8)

[ldub]

Line 5136 was throwing an invalid argument exception for me:

 R._engine.setSize = function(width, height) {
    var cs = this.canvas.style;
    this.width = width;
    this.height = height;
    width == +width && (width += "px");
    height == +height && (height += "px");
    cs.width = width; //THIS LINE CAUSES ERROR
    cs.height = height;
    cs.clip = "rect(0 " + width + " " + height + " 0)";
    if (this._viewBox) {
      R._engine.setViewBox.apply(this, this._viewBox);
    }
    return this;
  };

I changed this to

 R._engine.setSize = function(width, height) {
    var cs = this.canvas.style;
    this.width = width;
    this.height = height;
    width == +width && (width += "px");
    height == +height && (height += "px");
    if (width == "0px") {
        width = "1px";
    }
    if (height == "0px") {
        height = "1px";
    }
    cs.width = width; 
    cs.height = height;
    cs.clip = "rect(0 " + width + " " + height + " 0)";
    if (this._viewBox) {
      R._engine.setViewBox.apply(this, this._viewBox);
    }
    return this;
  };

and the error goes away. But really I have absolutely no idea what I'm doing, so I figure this might be useful info for you to know. It seems that 0px is not a valid property for width or height...

[mhemesath]

That looks like an issue in the Raphael code which is bundled with R2D3... you likely can't pass zero to it.

[ldub]

Its more like an issue with IE8 not failing silently on invalid arguments. If you look at this SO thread you can see that a similar error is thrown in a similar context, but without any Raphael or D3 involvement.

[mhemesath]

Well right, but I meant if Raphael should be modified to allow its canvas to be set to 0 for width and/or height.

[zackbrown]

I ran into this same issue: same error on line 5138 when testing in IE8. Unfortunately, @ldub 's fix didn't do the trick for me (same error, just six lines later.)

I'm working on r2d3 version 0.3.4, installed via bower install r2d3.

It looks like having percentage widths/heights on my svg elements is what was causing my problem. Specifically, my svg elements were all styled with width: 100% and that value ('100%') was getting passed into the R._engine.setSize function, and subsequently getting passed into that clip string, which IE8 didn't like.

I came up with a workaround which I submitted to the Raphael project as a pull request (DmitryBaranovskiy/raphael#828). In the meantime, my r2d3.js's R._engine.setSize function looks like this:

R._engine.setSize = function(width, height) {
  var cs = this.canvas.style;
  this.width = width;
  this.height = height;
  width == +width && width && (width += "px");
  height == +height && height && (height += "px");
  cs.width = width;
  cs.height = height;
  if((width + '').match(/%$/)) width = this.canvas.offsetWidth + 'px';
  if((height + '').match(/%$/)) height = this.canvas.offsetHeight + 'px';
  cs.clip = "rect(0 " + width + " " + height + " 0)";
  if (this._viewBox) {
    R._engine.setViewBox.apply(this, this._viewBox);
  }
  return this;
};

and that seems to be working well enough to support percentage widths and heights.

[shanSyapse]

I ran into the same issue with 100% width;
This is a nice fix! Hope it is in the source code

[roryhardy]

Hi there,

This project is no longer being maintained so this issue is being closed. Thank you for using r2d3 and taking the time to report this issue.