{"id":9450,"date":"2024-01-30T04:54:26","date_gmt":"2024-01-30T04:54:26","guid":{"rendered":"https:\/\/www.bacancytechnology.com\/qanda\/?p=9450"},"modified":"2024-01-30T04:54:26","modified_gmt":"2024-01-30T04:54:26","slug":"chart-in-d3js-not-showing-up-in-react-app","status":"publish","type":"post","link":"https:\/\/www.bacancytechnology.com\/qanda\/react\/chart-in-d3js-not-showing-up-in-react-app","title":{"rendered":"Chart in d3js Not Showing Up in React App"},"content":{"rendered":"<p>To ensure the rendering of a D3 pie chart within a React component, a series of adjustments needs to be done. Here&#8217;s a breakdown of the modifications:<\/p>\n<ul>\n<li>Using the <strong>useEffect<\/strong> hook ensures the execution of the D3 code for pie chart creation when the React component mounts.<\/li>\n<li>Buttons are provided for switching between different datasets (<strong>data1 and data2<\/strong>), triggering the update of the pie chart accordingly.<\/li>\n<li>D3 functions (<strong>d3.select, d3.pie, etc.<\/strong>) are used to generate and update the pie chart within the React component.<\/li>\n<\/ul>\n<p>This approach helps the integration of D3 visualization within a React component, efficiently managing SVG creation and updates based on React&#8217;s lifecycle, utilizing hooks such as <strong>useEffect<\/strong> and <strong>useRef<\/strong>.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"r\">import * as d3 from 'd3';\r\nimport * as React from 'react';\r\nimport { useEffect, useRef } from 'react';\r\n\r\nconst PieChart = () =&gt; {\r\n    const ref = useRef(null);\r\n\r\n   useEffect(() =&gt; {\r\n        if (!ref.current) return;\r\n\r\n        const width = 450,\r\n                   height = 450,\r\n                   margin = 40;\r\n        const radius = Math.min(width, height) \/ 2 - margin;\r\n\r\n        const color = d3.scaleOrdinal()\r\n            .domain([\"a\", \"b\", \"c\", \"d\", \"e\", \"f\"])\r\n            .range(d3.schemeDark2);\r\n\r\n        const svg = d3.select(ref.current)\r\n            .append(\"svg\")\r\n            .attr(\"width\", width)\r\n            .attr(\"height\", height)\r\n            .append(\"g\")\r\n            .attr(\"transform\", `translate(${width \/ 2}, ${height \/ 2})`);\r\n\r\n        const data1 = { a: 9, b: 20, c: 30, d: 8, e: 12 };\r\n        const data2 = { a: 6, b: 16, c: 20, d: 14, e: 19, f: 12 };\r\n\r\n        \/\/ Call the update function here after it's defined\r\n        update(\"data1\");\r\n    }, []);\r\n\r\n     const update = (data) =&gt; {\r\n        if (data == \"data1\") {\r\n            data = data1;\r\n        } else {\r\n            data = data2;\r\n        }\r\n\r\n        \/\/ Compute the position of each group on the pie:\r\n        const pie = d3.pie()\r\n        .value(function(d) {return d[1]; })\r\n        .sort(function(a, b) { return d3.ascending(a.key, b.key);} ) \/\/ This ensures that group order remains the same in the pie chart\r\n        const data_ready = pie(Object.entries(data))\r\n\r\n        \/\/ map to data\r\n        const u = svg.selectAll(\"path\").data(data_ready)\r\n\r\n        \/\/ Building the pie chart involves creating paths for each segment using the arc function.\r\n        u\r\n          .join('path')\r\n          .transition()\r\n          .duration(1000)\r\n          .attr('d', d3.arc().innerRadius(0).outerRadius(radius))\r\n          .attr('fill', function(d){ return(color(d.data[0])) })\r\n          .attr(\"stroke\", \"white\")\r\n          .style(\"stroke-width\", \"2px\")\r\n          .style(\"opacity\", 1)\r\n    }\r\n\r\n    return (\r\n        &lt;div ref={ref}&gt;\r\n            &lt;button onClick={() =&gt; update(\"data1\")}&gt;Data 1&lt;\/button&gt;\r\n            &lt;button onClick={() =&gt; update(\"data2\")}&gt;Data 2&lt;\/button&gt;\r\n        &lt;\/div&gt;\r\n    );\r\n};\r\n\r\nexport default PieChart;<\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>To ensure the rendering of a D3 pie chart within a React component, a series of adjustments needs to be done. Here&#8217;s a breakdown of the modifications: Using the useEffect hook ensures the execution of the D3 code for pie chart creation when the React component mounts. Buttons are provided for switching between different datasets [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":9451,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-9450","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/9450"}],"collection":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/comments?post=9450"}],"version-history":[{"count":1,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/9450\/revisions"}],"predecessor-version":[{"id":9452,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/9450\/revisions\/9452"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media\/9451"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media?parent=9450"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/categories?post=9450"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/tags?post=9450"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}