We Keep Coding

What is the problem with D3js working with Internet explorer 11

I am creating an SVG donut chart using D3js v4 library, and it works fine with Google chrome but it doesn't work at all with IE11
I tried to to put the code in this Codepen
'https://codepen.io/ohmto/pen/eYZeYqW'
any help or a reason why it doesn't work on IE11, it will be appreciated

I try to check your code and found => arrow functions in it. Arrow functions are not supported in the IE browser.
I try to modify your sample code and try to convert the arrow functions to normal functions to make it work with the IE browser.
After modifying the code, I noticed that the chart getting created but it is not in the proper format and data are missing too.
output in the IE 11 browser:
I again try to modify the JS and CSS code but the result was the same.
Further, I try to check the D3.JS and SVG related documents.
You can notice that SVG has partial support in the IE browser.
Some parts of D3.js may also not work with the older browsers.
You can try to simplify your sample and check whether it works with the IE. If it does not work then I suggest you use the JS code to identify the browser and inform users to visit the site using compatible browsers for your site.

jQuery throws SCRIPT5022: HierarchyRequestError when attempted to append a jQuery object on Internet Explorer ( IE)

I'm trying to use jQuery to insert an HTML table as a child node of a div element. My code looks something like this :
var table = $('#tableId').clone();
$('#divId').append(table);
jsFiddle
This code works fine on Chrome and Firefox, no issue, yet when I tested on Internet Explorer ( IE ) 10, the IE console throws an error like this:
SCRIPT5022: HierarchyRequestError
My internet search points me to this MSDN document :
http://msdn.microsoft.com/en-us/library/ie/gg592979(v=vs.85).aspx
It specifies that for the error message : The node cannot be inserted at the requested location. But why ?
I have tried prepend(), same error. For some reason I can't use table.appendTo(). appendTo doesn't work on all 3 browsers.
I would appreciate if someone can points me some clues how to get around this. Thanks.
Update: you can see the effect in this jsFiddle : http://jsfiddle.net/phamductri/LSaDA/ . Try Chrome and Firefox, it will work, then try IE.
Update: change the jQuery version to 1.11.0 or 2.1.0 will make the code work. But if trying to append the table into a div element in the new window, by referencing back window.opener.table : $('#divId').append(window.opener.table); This will not work in IE, though it works in Firefox and Chrome.
Update: I have discovered that this behavior is also happening when I skipped jQuery altogether and using built-in JavaScript functions. I have make another question here : Internet Explorer throws SCRIPT5022: HierarchyRequestError when trying to appendChild an HTML object from another window

This seems to be an Internet Explorer security feature, you cannot append a DOM node or jQuery object from one window to another in Internet Explorer, even those meeting same origin criteria and in situations where it works in other browsers - nodes simply cannot be passed between the opened window and the opener.
If you have a jQuery object then you can convert it to a DOM element and take the outerHTML as follows-
var table = $('#tableId').clone(), tableHtml = table[0].outerHTML;
Alternatively you could stick to plain JavaScript and write-
var tableHtml = document.getElementById('tableId').outerHTML;
This can then be added into the window document by setting the innerHTML of the desired DOM element as follows-
$('#divId')[0].innerHTML = tableHtml ;
or
document.getElementById('divId').innerHTML = tableHtml;
or
document.querySelector('#divId').innerHTML = tableHtml;
I have yet to see any actual documentation stating this, or giving the rationale behind it, but I have seen it cited in other StackOverflow questions and it is certainly consistent with behaviour I have seen when working with Internet Explorer.
Hat tip to NoGray in your linked question.

Adding a method to all HTML elements and document object in Internet Explorer

I want to add a method to all HTML elements and the document object in JavaScript.
After some googling I found http://krook.org/jsdom/.
I concluded that adding a method to the Node class would do the job,
and indeed in Firefox and Chrome this worked.
Below is pretty much what I did.
<script>
Node.prototype.foo=function(selector){
alert('succes');
}
document.foo();
document.getElementById("foo").foo();
</script>
In Internet Explorer it causes an error because Node is not defined.
Does anyone know how to do this in Internet Explorer?
Oh also, I'm using Internet Explorer 9.
Thank you.

The IE DOM won't allow JavaScript to access the constructors for prototyping, so element/Node prototyping is not supported by the IE DOM natively (IE 10 runs your code fine, as I suspect does IE 0).
What are you trying to achieve? There are arguments against doing DOM extensions - there is probably another way to do it.

Is there a way to make Internet Explorer understand this.style.setProperty?

I've started using the excellent D3.js data visualisation library (http://mbostock.github.com/d3/).
The results work great in Firefox and Chrome, but not in IE. One issue seems to be the heavy use of this.style.setProperty and this.style.removeProperty by D3, which isn't recognised by IE.
I wondered if anyone knew of a workaround or shim or some such? (My JavaScript is pretty poor, BTW).

I have been fighting with the same bug you can simply solve it by using the following pattern when you want to change the style.
element.style("property", "value");
It's absolutely necessary that the value is always a string. Otherwise you will get a weird Character Error in IE9 as it can only handle strings.
I tested it with D3JS 3.2.8.

What about .classed('class', true/false)? It works perfectly well in IE9:
function mouseOver(d, i) {
var element = d3.select(this);
var alreadyHasClass = element.classed('className'); // boolean
element.classed('cssClass', !alreadyHasClass); // set/remove class
}
BTW, it's faster add/remove classes to elements than appending information to "style".

I believe the newest version 2.1.3 solves this. Take a look.

HTML Custom Attributes Not Working in Chrome

When using HTML custom attributes it doesn't works in Chrome.
What I mean is, suppose I have this HTML:
<div id="my_div" my_attr="1"></div>
If I try to get this attribute with JavaScript in Chrome, I get undefined
alert( document.getElementById( "my_div" ).my_attr );
In IE it works just fine.

Retrieving it via getAttribute():
alert(document.getElementById( "my_div" ).getAttribute("my_attr"));
Works fine for me across IE, FF and Chrome.

IE is about the only browser I've seen that honor attributes that do not conform to the HTML DTD schema.
http://www.webdeveloper.com/forum/showthread.php?t=79429
However, if you're willing to write a custom DTD, you can get this to work.
This is a good article for getting started down that direction:
http://www.alistapart.com/articles/scripttriggers/

Got same problem for Safari and using getAttribute(..) made the magic. It looks like cross browser compatible. Here is nice article http://www.javascriptkit.com/dhtmltutors/customattributes.shtml

Are you declaring your page as XHTML compliant? You can't add new attributes to elements willy-nilly if you do. My understanding is that there are ways (after all, ASP.NET succeeds at it), but you have to emit all kinds of gunk (custom schema?). I'm not familiar with the details.