D3 (Data Driven Documents) is a JS library that helps us build visualizations. It binds arbitrary data to a DOM, where the data-driven transformations can be applied to the document. It works well by mutating the DOM element, usually a root node that was\u00a0placed in the HTML. You call .append (‘span’) and it inserts a <span><\/span> as a child of the node you selected.<\/p>\n
Whereas, React on the other hand, builds the application through one big call stack to various render methods.
\nWe create a tree of objects that represent the application and its state, and then React works out what DOM elements it should add, remove or mutate on your behalf.<\/p>\n
The problem arises when we need to use both of them together. D3 needs DOM which is generated by React. Therefore, we need a fake DOM with enough methods to trick D3.<\/p>\n
React-faux-dom supports a wide range of DOM operations. We can use the full D3 API with the help of react-faux-dom to have efficient D3 components and use React to render on the server side.<\/p>\n
Steps to use D3 with React components<\/strong><\/p>\n Installing :<\/span><\/p>\n [java]<\/p>\n npm install d3 [\/java]<\/p>\n Importing D3 and ReactFauxDOM :<\/p>\n [java] Creating react component with empty render method:<\/p>\n [java]<\/p>\n const MyChart = React.createClass({ [\/java]<\/p>\n Inside the render create a SVG\u00a0using ReactFauxDOM:<\/p>\n [java]<\/p>\n var node = ReactFauxDOM.createElement(‘svg’);<\/p>\n [\/java]<\/p>\n Now we have an SVG\u00a0element and, we can do what ever we want to do with this SVG element using D3:<\/p>\n [java]<\/p>\n var svg = d3.select("node"); svg.append("circle") Once\u00a0you are done with your SVG, then you just need to send it to React to render it accordingly:<\/p>\n [java]<\/p>\n return node.toReact();<\/p>\n [\/java]<\/p>\n And you are done!<\/p>\n Hope this helps!!<\/p>\n","protected":false},"excerpt":{"rendered":" D3 (Data Driven Documents) is a JS library that helps us build visualizations. It binds arbitrary data to a DOM, where the data-driven transformations can be applied to the document. It works well by mutating the DOM element, usually a root node that was\u00a0placed in the HTML. You call .append (‘span’) and it inserts a […]<\/p>\n","protected":false},"author":79,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":3,"footnotes":""},"categories":[1],"tags":[4006,4100,4064,4101],"class_list":["post-40476","post","type-post","status-publish","format-standard","hentry","category-technology","tag-d3","tag-integrating-d3","tag-react","tag-react-faux-dom"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t
\nnpm install react-faux-dom<\/p>\n
\nimport ReactFauxDOM from "{path-to-ReactFauxDOM-js-file}"
\nimport d3 from "{path-to-d3-js-file}"
\n[\/java]<\/p>\n
\nrender () {},
\n});<\/p>\n
\nsvg.append("div").html("First heading using d3 and React.")
\n.style("font-size","22px")
\n.style("color","green");<\/p>\n
\n .style("fill", "blue")
\n .attr("r", 40)
\n .attr("cx", 150)
\n .attr("cy", 350)
\n .on("mouseover", function() {
\n var myCircle = this;
\n d3.select(myCircle).style("fill","red");
\n })
\n .on("mouseout", function() {
\n var myCircle = this;
\n d3.select(myCircle).style("fill","green");
\n });
\n[\/java]<\/p>\n