title: migrating from D3.js V3 to D3 V4 Error :Cannot read property 'baseVal' of undefined
body: <p>I want to convert this code <a href="https://bl.ocks.org/mbostock/3213173" rel="nofollow noreferrer">https://bl.ocks.org/mbostock/3213173</a> into D3.js V4
  ,so i had to change some functions names like d3.svg.scale d3.svg.axis by the the new names in the d3 V4, but I still have some problems.
  This time I receive the error: Uncaught TypeError: Cannot read property 'baseVal' of undefined</p>
  
  <p><a href="https://i.stack.imgur.com/1KCsE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1KCsE.png" alt="enter image description here"></a></p>
  
  <p>at Scatterplot.js:83 -> cell.call(brush); in my code</p>
  
  <p>But I have no idea how to deal with it, so is there anyone faced the same problem or has a solution for this pb ?</p>
  
  <p>This is the code in d3 V4 (maybe I forgot something to change)</p>
  
  <pre><code>node = new ReactFauxDOM.Element('svg');
  var width = 960,
      size = 230,
      padding = 20;
  
  var x = d3.scaleLinear()
      .range([padding / 2, size - padding / 2]);
  
  var y = d3.scaleLinear()
      .range([size - padding / 2, padding / 2]);
  
  var xAxis = d3.axisBottom()
      .scale(x)
      .ticks(6);
  
  var yAxis = d3.axisLeft()
      .scale(y)
      .ticks(6);
  
  var color = d3.scaleOrdinal(d3.schemeCategory10);
  
  d3.csv("../../tweets.csv", function (error, data) {
      if (error) throw error;
  
      var domainByTrait = {},
          traits = d3.keys(data[0]).filter(function (d) { return d !== "species"; }),
          n = traits.length;
  
      traits.forEach(function (trait) {
          domainByTrait[trait] = d3.extent(data, function (d) { return d[trait]; });
      });
  
      xAxis.tickSize(size * n);
      yAxis.tickSize(-size * n);
  
      var brush = d3.brush()
          .on("start", brushstart)
          .on("brush", brushmove)
          .on("end", brushend);
  
      var svg = d3.select(node).append("svg")
          .attr("width", size * n + padding)
          .attr("height", size * n + padding)
          .append("g")
          .attr("transform", "translate(" + padding + "," + padding / 2 + ")");
  
      svg.selectAll(".x.axis")
          .data(traits)
          .enter().append("g")
          .attr("class", "x axis")
          .attr("transform", function (d, i) { return "translate(" + (n - i - 1) * size + ",0)"; })
          .each(function (d) { x.domain(domainByTrait[d]); d3.select(this).call(xAxis); });
  
      svg.selectAll(".y.axis")
          .data(traits)
          .enter().append("g")
          .attr("class", "y axis")
          .attr("transform", function (d, i) { return "translate(0," + i * size + ")"; })
          .each(function (d) { y.domain(domainByTrait[d]); d3.select(this).call(yAxis); });
  
      var cell = svg.selectAll(".cell")
          .data(cross(traits, traits))
          .enter().append("g")
          .attr("class", "cell")
          .attr("transform", function (d) { return "translate(" + (n - d.i - 1) * size + "," + d.j * size + ")"; })
          .each(plot);
  
      // Titles for the diagonal.
      cell.filter(function (d) { return d.i === d.j; }).append("text")
          .attr("x", padding)
          .attr("y", padding)
          .attr("dy", ".71em")
          .text(function (d) { return d.x; });
  
      cell.call(brush);
  
      function plot(p) {
          var cell = d3.select(this);
  
          x.domain(domainByTrait[p.x]);
          y.domain(domainByTrait[p.y]);
  
          cell.append("rect")
              .attr("class", "frame")
              .attr("x", padding / 2)
              .attr("y", padding / 2)
              .attr("width", size - padding)
              .attr("height", size - padding);
  
          cell.selectAll("circle")
              .data(data)
              .enter().append("circle")
              .attr("cx", function (d) { return x(d[p.x]); })
              .attr("cy", function (d) { return y(d[p.y]); })
              .attr("r", 4)
              .style("fill", function (d) { return color(d.species); });
      }
  
      var brushCell;
  
      // Clear the previously-active brush, if any.
      function brushstart(p) {
          if (brushCell !== this) {
              d3.select(brushCell).call(brush.clear());
              x.domain(domainByTrait[p.x]);
              y.domain(domainByTrait[p.y]);
              brushCell = this;
          }
      }
  
      // Highlight the selected circles.
      function brushmove(p) {
          var e = brush.extent();
          svg.selectAll("circle").classed("hidden", function (d) {
              return e[0][0] &gt; d[p.x] || d[p.x] &gt; e[1][0]
                  || e[0][1] &gt; d[p.y] || d[p.y] &gt; e[1][1];
          });
      }
  
      // If the brush is empty, select all circles.
      function brushend() {
          if (brush.empty()) svg.selectAll(".hidden").classed("hidden", false);
      }
  </code></pre>