mhemesath / r2d3 Goto Github PK

D3 uses Array.reduce so we need to ensure that is available in the compat lib.

Not sure why this just cropped up today, I can't find a relevant change in d3, but this now throws an error in r2d3:

var svg = d3.select("body").append("svg");
svg.selectAll("rect");

I get querySelectorAll does not exist for the paper element.

I bandaided this by overwriting d3's selectAll function:

var d3_selectAll = function(s, n) { // n being paper
  if (n.querySelector === void 0) return n.node.querySelectorAll(s);
return n.querySelectorAll(s); }

But I'm assuming the root of the issue is something else - for some reason the this in d3_selection_selectorAll(selector) function should be paper.node and not paper? Any clue as to why this is happening now?

Currently the top-most Raphael paper element can't be removed via the selection.remove API.

As you mention that d3.selection() support is sorely lacking, you might want to check out this fork of D3: d3/d3#630
and maybe combine efforts.

d3.xhr needs to be patched to work with IE. The easy way out is to fallback on jQuery, but that introduces an additional dependency. Though, r2d3 already depends on sizzle. Does anyone have any thoughts on this?

For certain elements, d3_selection_style is throwing an error on the styleConstant() function, complaining that this.style is undefined. My temporary workaround for this:

function styleConstant() {
   if (this.style === void 0) {
      this.attr("style", value, priority);
    } else {
      this.style.setProperty(name, value, priority);
    }
}

I'm still testing to see if this is a valid solution.

Selecting elements by class does not work in IE7.

I’ve made a little demo at https://github.com/robinhouston/r2d3/blob/selecting-by-class/examples/selecting-by-class.html. This works fine in normal browsers, but in IE7 what happens is that three new circles are added at each frame, rather than the existing ones being moved, because the existing ones aren’t being matched by the selectAll('.circle').

Is this a known issue? I thought it might be, since all the examples select by tag name rather than by class, but I can’t see it documented.

The svg:line is currently unsupported. path can be used instead of line:

append("path")
.attr("d", function(d) { return "M0,30L0," + d.x }) 

etc.

svg:line attributes (x1, x2, y1, y2) currently unsupported.

A fallback wrapper using path could work for line. Not sure what this looks like for select?

I'd like to get Sizzle bundled into R2D3 to make setup of the lib as easy as possible. For sites that already have jQuery present, Sizzle can be pulled from jQuery.

I propose making a jQuery build that excludes Sizzle and assumes jQuery is present and loads Sizzle from there. That will give jQuery users the option of downloading a slightly smaller build and make R2D3 easier for setup for everyone else.

Axis tick marks and labels in IE8 not displaying.

var y = d3.scale.linear()
          .range([height, 0]);

var xAxis = d3.svg.axis()
              .scale(x)
              .orient("bottom")
              .tickSize(5).tickSubdivide(true);

var yAxis = d3.svg.axis()
              .scale(y)
              .orient("left")
              .tickFormat(formatPercent);

var svg = d3.select("body").append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom);

svg.append("text")
   .attr("x", 100)
   .attr("y", 100)
   .attr("font-size", 72)
   .text("0");

d3.tsv("./DATA/TSV/data.tsv", function (data) {

    data.forEach(function (d) {
        d.frequency = +d.frequency;
    });

    x.domain(data.map(function (d) { return d.letter; }));
    y.domain([0, d3.max(data, function (d) { return d.frequency; })]);

    svg.append("g")
    .attr("class", "axis")
    .call(xAxis)
    .attr("transform", "translate(0," + (height) + ")"); 


    svg.append("g")
       .attr("class", "axis")
       .call(yAxis)
       .attr("transform", "translate(" + margin.left + ", 0)");

    svg.selectAll(".bar")
           .data(data)
           .enter().append("rect")
           .attr("class", "bar")
           .attr("x", function (d) { return x(d.letter); })
           .attr("width", x.rangeBand())
           .attr("y", function (d) { return y(d.frequency); })
           .attr("height", function (d) { return height - y(d.frequency); })
           .attr("title", function (d) { return "x: " + d.letter + "; y: " + d.frequency; });

});

Looks like one of the changes you made in the last day or so changed sets ? Sets are now appended as a dom object, which shouldn't happen.

Unable to get the d3 force layout to work with r2d3, details asked n stack overflow:
http://stackoverflow.com/questions/12785324/getting-d3-js-to-work-with-raphael-js

Location: /r2d3-master/examples/d3_examples/albers/albers.html

The map does not render, a couple of script errors are reported (IE9 set to IE8 mode). I guess the latter of these is actually a JQuery issue.

SCRIPT5007: Unable to get value of the property 'paddingRight': object is null or undefined 
r2d3.v2.js, line 12717 character 9

SCRIPT438: Object doesn't support property or method 'slider' 
albers.html, line 96 character 1

It looks as though e75ef95 breaks IE7, which doesn’t have Element.

Currently child elements only inherit transformation properties from their group parents. This needs to be enhanced to inherit style properties as well.

I've been trying to get to the root of the issue on this one but haven't had any luck yet, no matter if the text is a function or string.

d3_selectionPrototype.text is returning the correct value, but within it this.textContent is always returning undefined - while the value of 'v' is correct. I keep going around in circles on this one. hints?

While trying to get a line graph to work on IE8, it throws 'baseVal' is null or not an object error for d3_selection_classedName (line 9514 in r2d3.v2.js).

Line graph example: http://jsfiddle.net/vinci/an8u7/

Please convert (to r2d3) few of the official D3 examples. E.g.:

http://mbostock.github.com/d3/ex/calendar.html
(or http://mbostock.github.com/d3/talk/20111018/calendar.html )
http://mbostock.github.com/d3/ex/box.html
http://mbostock.github.com/d3/ex/treemap.html

The above "chart" types are very useful but are missing mostly from other charting libraries (and d3 alone won't cut it since many "real" projects still require IE8 support :( )

Thanks in advance.

I think we can remove more custom code from the selection-append module by adding an appendChild method to the paper. The append method would then be fed an actual dom element created by the d3 code which it could use to check the type of node to create and just append it to the paper.

This would then leave the SVG override to be the only piece of modified logic in the append module.

Not sure if you're looking to support ie7, but in order for your CSSStyleDeclaration shim to work in ie7, the variable CSSStyleDeclaration needs to be defined. I added this to compat.js:

if (!CSSStyleDeclaration)
    var CSSStyleDeclaration = function() {};

So far this works.

The problem is actually in raphael.js. If define exists, eve is undefined for Raphael and initialization fails.

I made it temporarily work by removing the typeof define != 'undefined' clause from the line above in my build of r2d3, but a more elegant solution isn't far.

(The same applies to sizzle)

An AMD-ready version of r2d3 should be made available.

IE gets a performance boost when using cloneNode over createElement. Update selection.append to use cloneNode to take advantage of this.

In attempting to use this library to draw some graphs, the class name are not applied to the vml markup.

I see it in the svg section, but the generated shape tags do not have the styles defined in my classes.

Note this also effects IE9 just using standard D3. So maybe just an IE problem altogether?

Using attr('transform', function() { return "translate(4,5)" }) on elements results in an incorrect matrix being set for the value, ie transform=matrix(0,0,0,0,0,0).

D3 uses the native svg transform while Raphael expects a string similar to the path string. I'm assuming that the translate() function doesn't work in ie.

Several edits would have to be made to D3.transform:

• Use "set" instead of "g"
• Update d3_transform.prototype.toString to something like:

d3_transform.prototype.toString = function() {
  return "t" + this.translate
      + "r" + this.rotate
      + "s" + this.scale;
};

Raphael doesn't have support for 'skew', so that might be buildable with transform, rotate, and scale?

I'm still debugging transform, so there might be more.

Location: /r2d3-master/examples/d3_examples/chord/chord-flare.html

The labels that are supposed to be position around the outer edge of the chord-flare example all appear at the centre of the visualization, suggesting the positioning has simply failed for some reason.

Another error that I've found, verified that this one isn't my browser, and is the latest version of the code!

SCRIPT438: Object doesn't support property or method 'updateStyle'
r2d3.v2.js, line 10982 character 7

Code that works with the old version:

https://gist.github.com/3912776

When I try to do an animation with 'transform', an error message popup. 'g.transform.baseVal is null or not an object' at the line 10463.

I have this problem when a call an animation this way :

d3.select(g).node().transition().delay(i * 80).duration(600)
            .attr('transform', function(d) {
                return "translate("+d.startCoords.x+","+d.startCoords.y+")";
            })
            .style('opacity', 1);

Thanks

I'm hoping it's just me having something wrong again but I seem to be getting an error with the latest code... This occurs when I try and run through IE9 with the Browser mode set to IE8 and the Document mode set to IE8 Standards.

SCRIPT5007: Unable to get value of the property 'svg': object is null or undefined
r2d3.v2.js, line 233 character 1

Now that groups are supposedly working I'm trying another round of getting the Sankey visualization working, so another wave of bugs. Hopefully at the end I'll be able to provide a working example with just different javascript include tags!

Anyway first bug "Cannot read property 'arrow-end' of undefined" seems to be occuring on line 13039 of r2d3.vs.js.

Public Gist: https://gist.github.com/4175355

If for example I try to do something like the following:

var circles = svg.selectAll('.circle').data(data); circles.enter()...

Everything works great, I can append new elements and change existing ones. However, clearing out unneeded nodes by doing:
circles.exit().remove(); doesn't seem to work in IE8.

I've got a full example up at http://jsfiddle.net/sduret/FLnYt/

I'm working with this tutorial: http://flowingdata.com/2012/08/02/how-to-make-an-interactive-network-visualization/

I converted the CoffeeScript to JavaScript using http://cs2js.nodejitsu.com/ but it's otherwise unaltered.

In IE8 using R2D3 instead of D3 it fails with:

Message: Object doesn't support this property or method
Line: 9942
Char: 5
Code: 0
URI: http://localhost/dataviz/r2d3.v2.js

which is this line in onAdd():

this.addEventListener(type, this[name] = wrapper, wrapper.$ = capture);

Can you help?

See: https://github.com/mbostock/d3/wiki/Selections#wiki-insert

Lack of a group element in Raphael is a pretty big inconvience for both styling and stacking order of rendered elemnts when dynamically inserting them onto the page.

A good starting point may be to check out this plugin which adds VML and SVG group support to Raphael. https://github.com/rhyolight/Raphael-Plugins/blob/master/raphael.group.js

I tried looking on the Internet but could not find a reason that the group elemnt wasn't included in Raphael other than "Raphael isn't an API for SVG"

I've been unable to get drag events working with the original D3 syntax. Ultimately this will rely on a transformation (I know these aren't working) but the event seems to fail well before this.

function d3_mousePoint(container, e) {
   var svg = container.ownerSVGElement || container;

I get an exception "Unable to read ownerSVGElement of undefined".

I believe I've correctly removed all my groups (and am now using 'set' instead to verify that it wasn't the unmerged trunk code causing issues). A small sample of code that should help to reproduce is as follows. If I un-comment the click event then that works correctly. I've not included the dragMove function because it doesn't get anywhere near that far.

var sankey = d3.sankey()
  .nodeWidth(15)
  .nodePadding(10)
  .size([width, height]);

  d3.json("energy.json", function(energy) {
    ...
    ...
    sankey
     .nodes(energy.nodes)
     .links(energy.links)
     .layout(32);

    var node = svg.append("set").selectAll(".node")
     .data(energy.nodes)
     .enter().append("set")
     .attr("class", "node");

    node.append("rect")
     .attr("height", function(d) { return d.dy; })
     .attr("width", sankey.nodeWidth())
     .attr("fill", function(d) { return d.color = color(d.name.replace(/ .*/, "")); })
     .attr("stroke", function(d) { return d3.rgb(d.color).darker(2); })
     .attr("transform", function(d) { return "t" + d.x + "," + d.y + ""; })
      //.on('click', function() { alert('clickTest'); })
      .call(d3.behavior.drag()
        .origin(function(d) { return d; })
        .on("dragstart", function() { this.parentNode.appendChild(this); })
        .on("drag", dragmove));

HTML:

<p id="paper"></p>

javascript:

var svg = 
    d3.select("#paper").append("svg")
        .attr({
            width: "200",
            height: "200"
        });
svg.append("text")
    .attr({
        x: "100",
        y: "100"
    })
    .text("hi");

And I'm getting the following error in IE8:

Unknown runtime error r2d3.v2.js line 5178

This works just fine in chrome, and it works if you change the <p> to a <div>.

Location: r2d3-master/examples/chord/chord.html

The chord example displays 'undefined' entries right around the circular axis where instead ticks "-" should be present on their own.

I believe Raphael doesn't support "title" but instead uses "text". Therefore calls such as the following will fail:

node.append("title")
  .text(function(d) { return d.name + "\n" + format(d.value); })

Simple workaround is to replace "title" with "text", but it's an inconsistency with D3.

node.append("text")
  .text(function(d) { return d.name + "\n" + format(d.value); })

I should add that the error is "Property 'title' of object # is not a function" within Raphael.fn.appendChild.

If you try to set the xlink:href attribute on an svg image element, an exception is thrown saying the raphael object has no such method. As pointed out by @mhemesath you can set the src attribute as a workaround at the moment, but it's not ideal.

Here's a fiddle showing the problem and an alternative workaround (by accessing the underlying raphael object): http://jsfiddle.net/k52kA/7/

Uncaught TypeError: Object # has no method 'updateStyle' r2d3.v2.js:12690
ElementStyle.setProperty r2d3.v2.js:12690
styleConstant

Some of the recent changes have made rect render incorrectly in ie7 / ie8. Looks like it's creating a strange path string (all rects look like arcs with flat bottoms).

I've added a shapes.html file for testing - all other shapes seem to be setting attributes correctly. @mhemesath I'm looking through your changes in your style update to see if I can find anything that would cause this. The only difference I can see in the outputs of attributes is that height and width are always going to auto in ie. This could be unrelated, though.

I'm running out of places to hunt for identifying the issue - have any ideas?

I'm evaluating the r2d3 resource to possibly support D3 on IE for a .gov client. I was looking specifically at the bubble plot example provided and received this error trying to view the demo from IE8 (winXP)..works fine on Chrome of course.

Any resolution possible?

Object doesn't support this property or method
r2d3.v2.js Line:12840
Code: 0 Char: 7

I've found an error using .append("text") which seems to appear sometimes, I managed to workaround in one situation but not in another, although I don't quite understand why/how it worked.

var node = svg.append("set").selectAll(".node")
  .data(energy.nodes)
  .enter().append("set")
  .attr("class", "node")

node.append("rect")
   .attr("height", function(d) { return d.dy; })
    .attr("width", sankey.nodeWidth())
    .append("text")
      .text(function(d) { return d.name + "\n" + format(d.value); });

This gives the following error: "Object Raphael's object has no method 'appendChild'" in d3_selectionPrototype.append.

I can fix this by splitting the code out where the text is appended like so. I'm assuming this works because the former is trying to add the text to the rectangle? Whereas the latter is adding it to a "set"?

node.append("rect")
   .attr("height", function(d) { return d.dy; })
   .attr("width", sankey.nodeWidth());

node.append("text")
  .text(function(d) { return d.name + "\n" + format(d.value); });

For some reason the following also fails, even though it's already split out. Maybe because Raphael's path's don't support text?

var link = svg.append("set").selectAll(".link")
  .data(energy.links)
  .enter().append("path")
    .attr("class", "link")
    .attr("d", path);

link.append("text")
  .text(function(d) { return d.source.name + " → " + d.target.name + "\n" + format(d.value); });

I attempted to use r2d3 to get something like this Curved textPath demo working in IE 8 (linked to the original demo, not my adaptation).

However, pre-9 versions of IE are complaining that Object doesn't support property or method 'setAttributeNS'.

Is this a known issue? Any known workarounds?

I'm evaluating the r2d3 resource to possibly support D3 on IE for a .gov client. I was looking specifically at the symbols map example provided from IE8 (winXP)..works fine on Chrome of course.

I simply get a blank white page, no errors displayed

Native trim() functionality within the d3_collapse() function failed for me in ie8 and ie7 if I was adding/removing classes on objects with more than one class - for example, both of the following fails in an ie8 / ie7 console:

"string ".trim()
"string two".trim()

I added to compat.js to fix this:

if (!String.prototype.trim) {
    String.prototype.trim = function() {
      return this.replace(/^\s+|\s+$/g, '');
    };
}

Simple fix would be to replace line 13005 (in the current build) with

      css = this.currentStyle() || {},

or

Raphael.el.currentStyle = function() {
  return this.shadowDom.currentStyle || {};
};

R2D3 should fork Raphael and create an optimized version.

Specifically:

• Exclude SVG module (R2D3 only included in IE where SVG doesn't exist)
• Updated element creation to use cloneNode to for ~60% performance improvement on DOM node creation for node intensive visualizations.

If we want to push this lib in the direction of a drop in replace for D3, we may consider dropping the d3.raphael method. Instead, r2d3 could override SVG append and generate a paper element instead. This has the benefit of staying more consistent to d3 native, but on the other hand is a little bit more magic.

// current
d3.select('div').raphael(200, 200)

// proposed
d3.select('div').append('svg').attr({ height: 200, width: 200 });

@mbecica I'd appreciate your feedback on this.

How to dynamically add text for 'circle',when r2d3is not support for svg.append("g")