IE8 and D3.js

Ali

unread,

May 8, 2012, 8:55:51 PM5/8/12

to d3-js

Hi All,
I need add support for IE8 in my D3 visualization.

I want to generate SVG using D3 and then import it into Raphael-JS if
user's browser is IE8/7


<script type="text/javascript" src="./jslib/es5-shim.min.js"></
script>
<script type="text/javascript" src="./jslib/sizzle.min.js"></script>
<script type="text/javascript" src="./jslib/d3.v2.min.js"></
script>
<script type="text/javascript" src="./jslib/raphael-min.js"></script>
<script type="text/javascript" src="./jslib/mycode.js"></script>

When I run this code in IE8 I get:

Object doesn't support property or method 'createElementNS' from d3

This basically stops the whole process and I can't even make d3
produce svg code.

Is there any compatible implementation of this method
(createElementNS) I can drop in instead (something like es5-shim) ? Or
is there any version of D3.js that doesn't use this method.

Thanks,

Benjamin West

unread,

May 8, 2012, 9:56:00 PM5/8/12

to d3...@googlegroups.com

See https://github.com/mbostock/d3/issues/73
https://github.com/mbostock/d3/issues/630
and friends.

Best bet seems to be integration with svgweb, raphael, or use Chrome Frame.

-bewest

Ali

unread,

May 8, 2012, 10:06:10 PM5/8/12

to d3-js

Thanks Ben,

I am still not clear why this is failing.

From my understanding, D3 only generates svg code. I thought this
should work regardless of whether browser has SVG support or not.

I guess I am after a mock/compatibility implementation of
createElementNS method, if there is any.

-A

On May 9, 11:56 am, Benjamin West <bew...@gmail.com> wrote:
> Seehttps://github.com/mbostock/d3/issues/73https://github.com/mbostock/d3/issues/630

Guillaume Lecomte

unread,

Jun 14, 2013, 12:41:13 PM6/14/13

to d3...@googlegroups.com

Using shims I finally got IE8 to run d3, I joined the file I use.

ie8-compat.js

Pankaj Dugar

unread,

Sep 5, 2013, 8:33:32 AM9/5/13

to d3...@googlegroups.com

I tried the similar steps but couldn't make D3 run in IE8.

Below is my source code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

function newbar(id,text1,value) {

var color;

value = Math.round(value);

if(value<35)

color = "#BE0D0D";

else {

if(value<75)

color = "#F4D20E";

else

color = "#66EE66";

}

var w = $("#" + id).width();

var h = $("#" + id).height();

var vis = d3.select("#" + id)

.append("svg:svg")

.style("width", "100%")

.style("height", "100%")

var g = vis.append("svg:g")

//.attr("transform", "translate(0," + 0 + ")")

.style("width", w)

.style("height", h);

var x = 0;

var y = 0;

var rec1 = g.append("rect")

.attr("x", x)

.attr("y", y)

.attr("fill", "#F3F3F3")

.attr("height", h)

.attr("width", w)

var rec2 = g.append("rect")

.attr("x", x)

.attr("y", y)

.attr("fill", color)

.attr("height",h)

.on("mouseover", function () { d3.select(this).transition().style("opacity", 0.6); })

.on("mouseout", function () { d3.select(this).transition().style("opacity", 100); })

//Animation of bar

.attr("width", 0)

.transition()

.delay(100)

.duration(1000)

.attr("width", function (d) {

var barWidth = value;

if (barWidth == -1)

barWidth = 0;

return barWidth + "%";

})

//Adding score Text

var data = new Array();

data.push(value);

g.selectAll("text2")

.data(data)

.enter()

.append("svg:text")

.attr("x", 0)

.attr("y", h / 2 + 5)

// .attr("dx", function () {

// if (value <= 15)

// {return value + "%";}

// else

// {return 5;}

// })

.attr("text-anchor", "left")

.text(function () {

if (value != -1)

{

return text1 + " (" + value + ")";

}

else

{

return text1 + "(NA)";

}

})

.style("font-size", "14px")

.style("font-family", "Segoe UI")

}

</script>

</head>

<body>

<tr>

</td>

</tr>

</table>

newbar("ddd","Overall",50);

</script>

</body>

</html>

Nate Vack

unread,

Sep 5, 2013, 10:44:58 AM9/5/13

to d3...@googlegroups.com

I've had excellent luck with Chrome Fame, for what it's worth. Yes,
it's at end-of-life, but so is IE8.

-n

Israel Ekpo

unread,

Sep 5, 2013, 11:37:08 AM9/5/13

to D3

Internet Explorer 8 is not supported.

https://github.com/mbostock/d3/wiki#browser-support

Author and Instructor for the Upcoming Book and Lecture Series

Massive Log Data Aggregation, Processing, Searching and Visualization with Open Source Software

http://massivelogdata.com

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

Message has been deleted

IPWright

unread,

Sep 9, 2013, 11:38:33 AM9/9/13

to d3...@googlegroups.com

Try using R2D3 instead https://github.com/mhemesath/r2d3 . It is a D3->Raphael shim that works quite well.

Reply all

Reply to author

Forward