d3 - Using D3 v3 and D3 v4 on the same page

Following from this guide: https://chewett.co.uk/blog/2021/how-to-load-multiple-d3-versions-at-once/ , I have imported D3 v3 and D3 v4 into my project (please note as well, I am using Yesod)

<script src="https://d3js.org/d3.v4.js">
<script>
  d3v4 = window.d3;
  window.d3 = null;
<script src=https://d3js.org/d3.v3.min.js">
<script>
  d3v3 = window.d3;

I am trying to draw both of the following graphs on the page: https://www.d3-graph-gallery.com/graph/histogram_basic.html https://www.d3-graph-gallery.com/graph/pie_basic.html

In the script, I have changed references from d3 to d3v4 for the Histogram, and d3v3 for the Pie Char.

Histogram

var svg = d3v4.select("#my_dataviz")
   .append("svg")
     .attr("width", width + margin.left + margin.right)
     .attr("height", height + margin.top + margin.bottom)
   .append("g")
     .attr("transform",
           "translate(" + margin.left + "," + margin.top + ")");

 // get the data
 d3v4.csv("https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/1_OneNum.csv", function(data) {
...

Pie Chart

var svg = d3v3.select("#piechart")
    .append("svg")
    .append("g")

svg.append("g")
    .attr("class", "slices");
svg.append("g")
    .attr("class", "labels");
svg.append("g")
    .attr("class", "lines");

var width = 960,
    height = 450,
    radius = Math.min(width, height) / 2;

var pie = d3v3.layout.pie()
    .sort(null)
    .value(function(d) {
        return d.value;
    });
...

Here is a pastebin of the full Javascript document https://pastebin.com/TLV3eFpf

My issue is, when I run this file, I get the following error (the histogram is not rendered, but the pie chart is):

Uncaught TypeError: path.merge is not a function
    axis https://d3js.org/d3.v4.js:623
    call https://d3js.org/d3.v3.min.js:3
    <anonymous> http://localhost:3000/static/tmp/autogen-zMHMAOmj.js:1
    fixCallback https://d3js.org/d3.v4.js:11497
    send https://d3js.org/d3.v4.js:11470
    call https://d3js.org/d3.v4.js:792
    respond https://d3js.org/d3.v4.js:11395

Would anyone be able to help me out?

d3 - Using D3 v3 and D3 v4 on the same page

0 Answers