title: Broken code upgrading to d3.js v4.0
body: <p>I have the following code in my js file:</p>
  
  <pre><code>d3.selectAll("svg").remove();
  svgContainer = d3.select("#MainDiv")
      .append("svg")
      .attr({
          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();
          });
  </code></pre>
  
  <p>This code worked fine when using d3.js v3.5.17. I just upgraded to v4.0.0 and I now get the following error:</p>
  
  <pre><code>Unable to get property 'on' of undefined or null reference
  </code></pre>
  
  <p>I can't find what has caused this to break. What do I need to change to get this to work in v4?</p>
  
  <p>EDIT:</p>
  
  <p>Thanks to Gerardo, I have now got my code to work. Use attr if only one attribute is defined, attrs if more than one. The following snippet of code now works with d3.js v4.0, as long as I add the reference to d3-selection-multi.v0.4.min.js:</p>
  
  <pre><code>var BorgAnalogue = function (container, object) {
  var d = [{ x: object.X, y: object.Y, moveX: object.X, moveY: object.Y }];
  var analogue = container.data(d).append("g").attr("transform", function (d) { return "translate(" + d.x + "," + d.y + ")"; }).call(onDragDrop(dragmove, dropHandler))
      .attr("id", "A" + object.ModuleNumber).attr("title", "Analogue " + object.ModuleNumber + " - brIQ Size: 14&amp;#10;Label = " + object.label + "&amp;#10;Source = " + s).attr("class", "masterTooltip")
      .on("mouseenter", mouseenter).on("mouseleave", mouseleave).on("mousemove", mousemove).on("mousedown", mousedown).on("mouseup", mouseup);
  analogue.attr("desc", "Analogue-Analogue Module Parameters-738-470");
  analogue.append("rect").attrs({ x: 20, y: 0, width: 220, height: 25, fill: "#FFFFFF", stroke: "black", "stroke-width": 1 });
  analogue.append("text").attrs({ x: 43, y: 20, "font-family": "arial", "font-stretch": "condensed", "font-size": "20px", fill: "black" }).text(object.label);
  analogue.append("rect").attrs({ x: 20, y: 25, width: 220, height: 55, fill: "#F5F5FF", stroke: "black", "stroke-width": 1, id: "highlight" });
  analogue.append("path").attrs({ "d": "M 20,35 a10,15 0 0,0 0,30", fill: "#FFFFFF", stroke: "black", "stroke-width": 1, "class": "analogDrop", "id": "s-50" }).on("mouseover", overNode)
      .on("mouseout", outNode);
  </code></pre>
  
  <p>}</p>
  
  <p>Note the mix of attr and attrs.</p>