Broken code upgrading to d3.js v4.0

Question

I have the following code in my js file:

d3.selectAll(\"svg\").remove();
svgContainer = d3.select(\"#MainDiv\")
    .append(\"svg\")
    .attr({
        widt         


        

Answer 1

The change is minimal, just one letter: attrs instead of attr. That's because you are using a multi-value syntax (your object). Check the API:

https://github.com/d3/d3-selection-multi

So, the code should be:

svgContainer = d3.select("#MainDiv")
    .append("svg")
    .attrs({
        "width": 1920,
        "height": 932,
        "version": 1.1,
        "xmlns": "http://www.w3.org/2000/svg",
        "viewBox": "-40, -40, 2810, 1940",
        "class": "borgModuleDesigner"
    })
    .on("contextmenu",
        function() {
            d3.event.preventDefault();
        });

<div id="#MainDiv"></div>

<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://d3js.org/d3-selection-multi.v0.4.min.js"></script>

Click "run code snippet", and you'll not see the error anymore.

But answering your question created another question: I could only make it work referencing the selection-multi as a separate link:

<script src="https://d3js.org/d3-selection-multi.v0.4.min.js"></script>

Funny enough, it doesn't work using the "whole" D3 4.0 library. It should work using the complete D3 4.0 library:

<script src="https://d3js.org/d3.v4.js"></script>

But, apparently, it doesn't.

EDIT: As it seemed, d3.selection-multi is not part of the default bundle. So, you'll have to do the way I did in the snippet. According to the API:

For the sake of parsimony, the multi-value map methods have been extracted to d3-selection-multi and are no longer part of the default bundle.