How do I use mutationobserver instead of mutation events?

javascript d3.js mutation-observers mutation-events stream-graph
Jean V. Adams picture Jean V. Adams · Nov 13, 2013 · Viewed 7.8k times · Source

I am trying to create my first streamgraph with D3.js. I am starting with a working example which incorporates a tooltip from code posted on-line, http://bl.ocks.org/WillTurman/4631136:

enter image description here

When I copy the index.html and data.csv files to my PC (Windows 7), I am able to see the streamgraph in a browser (Firefox). However, I get a JS warning, "Use of Mutation Events is deprecated. Use MutationObserver instead."

What lines of code correspond to the Mutation Event? And how should I edit them to use a MutationObserver instead?

I am new to D3 and javascript. Although I found some discussion of mutation events and MutationObservers on-line, I didn't see any examples that were basic enough for me to understand and apply to my situation. I would appreciate any tips.

Answer

Lars Kotthoff picture Lars Kotthoff · Nov 14, 2013

This is something that will need to be changed in the D3 source. As a user (and certainly as a beginner), you don't need to worry about this -- the warning is only relevant to the developers. Feel free to open an issue about this.

Related questions

How can I remove or replace SVG content?

I have a piece of JavaScript code which creates (using D3.js) an svg element which contains a chart. I want to update the chart based on new data coming from a web service using AJAX, the problem is that …

Read More
Resize svg when window is resized in d3.js

I'm drawing a scatterplot with d3.js. With the help of this question : Get the size of the screen, current web page and browser window I'm using this answer : var w = window, d = document, e = d.documentElement, g = d.getElementsByTagName(…

Read More
D3 Appending Text to a SVG Rectangle

I'm looking to append html onto a rectangle in D3 to give me a multiple line tooltip. The bottom part is how I'm adding a rectangle which may be part of the problem. The top is the code that should …

Read More