d3.mouse（this）return Uncaught TypeError：无法读取属性＆＃39; sourceEvent＆＃39;为null

Question

我有一个条+线+符号图表，当用户点击y轴在线性和sqrt之间切换时会转换。 http://bl.ocks.org/jebeck/9457536。它适用于一个svg，但是当一个网页中有多个svg时，这只能在一个svg（s）上工作;在其余的svg（s）上，线条和符号被移动到一个单独的点，因为x值不是数字。调试显示d3.mouse（invisibleRect.node（））得到Uncaught TypeError：无法读取属性＆＃39; sourceEvent＆＃39;为null。我怀疑当一页上有多个svg元素时，这与最新元素的优先级有关，但只是努力寻找一个好的解决方案。感谢。

d3.csv("data13.csv", function (error, data) {
  if (error) throw error;
  if (data.length == 0) {
    svg.append("text").text("data is empty");
    throw "No Input";
  }

  var attributeName = d3.keys(data[0])[0];
  var metricList = d3.keys(data[0]).slice(1);
  var target = metricList[metricList.length - 1];

  data.forEach(function (d) {
    var maxData = d3.max(data, function (d) { return d3.max(metricList.map(function (name) { return +d[name]; })); });
    var minData = d3.min(data, function (d) { return d3.min(metricList.map(function (name) { return +d[name]; })); });

    x0.domain(metricList);
    x1.domain(data.map(function (d) { return d[attributeName]; })).rangeRoundBands([0, x0.rangeBand()]);
    y.domain([Math.min(0, minData) * space_to_top, Math.max(0, maxData) * space_to_top]);

    svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

    svg.append("g")
      .attr("class", "y axis")
      .call(yAxis);

    var drawBars = svg.selectAll(".bars")
      .data(metricList)
      .enter().append("g")
      .attr("class", "bargroup")
      .attr("transform", function (name) { return "translate(" + x0(name) + ",0)"; });

    drawBars.selectAll("rect")
      .data(function (metricName) {
        return data.map(function (d) {
          return {
            name: d[attributeName],
            value: +d[metricName],
            title: metricName
          };
        });
      })
      .enter().append("rect")
      .attr("width", x1.rangeBand())
      .attr("x", function (d) { return x1(d.name); })
      .attr("y", function (d) { return y(Math.max(0, d.value)); })
      .attr("height", function (d) { return Math.abs(y(d.value) - y(0)); })
      .style("fill", function (d) { return color(d.name); })
      .on("mouseover", function (d) {
        d3.select(this).style("fill", "red");
      })
      .on("mouseout", function (d) {
        d3.select(this).style("fill", color(d.name));
      })
      .append("title")
      .text(function (d) {
        return attributeName + ": " + d.name
          + "\nCategory: " + d.title
          + "\nValue: " + d.value;
      });

    data.forEach(function (d, i) {
      var lineFunction = d3.svg.line()
        .x(function (k) { return x0(k) + x1(d[attributeName]) + x1.rangeBand() / 2; })
        .y(function (k) { return y(+d[target]); });

      svg.append("path")
        .attr("class", "targetLine" + i)
        .attr("d", lineFunction(metricList))
        .style("stroke", "#959595")
        .style("stroke-width", 1);

      // create symbols along the line
      svg.append("g")
        .selectAll("path")
        .data(metricList)
        .enter()
        .append("path")
        .attr("class", "symbol" + i)
        .attr("transform", function (k) {
          return "translate(" + (x0(k) + x1(d[attributeName]) + x1.rangeBand() / 2) + ","
            + y(+d[target]) + ")";
        })
        .attr("d", d3.svg.symbol()
          .type(symbol(d[attributeName]))
          .size(64))
        .style("fill", color(d[attributeName]))
        .style("stroke", "000000")
        .on("mouseover", function (k) {
          d3.select(this).attr("d", d3.svg.symbol().type(symbol(d[attributeName])).size(180));
        })
        .on("mouseout", function (k) {
          d3.select(this).attr("d", d3.svg.symbol().type(symbol(d[attributeName])).size(64));
        })
        .append("title")
        .text(target + " for " + d[attributeName] + ": " + d[target]);
    });
    // toggle between linear and sqrt y axis

    var sqrtScale = d3.scale.sqrt().clamp(true).range([height, 0]);
    sqrtScale.domain([
      Math.min(0, minData) * space_to_top, 
      Math.max(0, maxData) * space_to_top
    ]);

    var sqrtAxis = d3.svg.axis().scale(sqrtScale).orient('left');
    var log = false;
    var transitionDuration = 500;

    var lineFunction_sqrt = d3.svg.line()
      .x(function (k) { return x0(k) + x1(data[i][attributeName]) + x1.rangeBand() / 2; })
      .y(function (k) { return sqrtScale(+data[i][target]); });

    var lineFunction_linear = d3.svg.line()
      .x(function (k) { return x0(k) + x1(data[i][attributeName]) + x1.rangeBand() / 2; })
      .y(function (k) { return y(+data[i][target]); });

    invisibleRect = svg.append('rect')
      .attr({
        'x': -margin.left,
        'y': 0,
        'height': height,
        'width': margin.left,
        'fill': '#FFFFFF',
        'opacity': 0.0,
        'id': 'invisibleRect'
      });

    invisibleRect.on('click', function () {
      try {
        hoverHelp.remove();
      }
      catch (ReferenceError) {
        console.log("There's no hoverHelp right now.");
      }
      if (!log) {
        svg.select('.y.axis')
          .transition()
          .duration(transitionDuration)
          .call(sqrtAxis);
        drawBars.selectAll("rect")
          .transition()
          .duration(transitionDuration)
          .attr("y", function (d) { return sqrtScale(Math.max(0, d.value)); })
          .attr("height", function (d) { return Math.abs(sqrtScale(d.value) - sqrtScale(0)); });

        for (i = 0; i < data.length; i++) {
          svg.select(".targetLine" + i)
            .transition()
            .duration(transitionDuration)
            .attr("d", lineFunction_sqrt(metricList, i));
        };

        for (i = 0; i < data.length; i++) {
          svg.selectAll(".symbol" + i)
            .transition()
            .duration(transitionDuration)
            .attr("transform", function (k) {
              return "translate(" + (x0(k) + x1(data[i][attributeName]) + x1.rangeBand() / 2) + ","
                + sqrtScale(+data[i][target]) + ")";
            });
        };

        log = true;

      } else {
        svg.select('.y.axis')
          .transition()
          .duration(transitionDuration)
          .call(yAxis);

        drawBars.selectAll("rect")
          .transition()
          .duration(transitionDuration)
          .attr("y", function (d) { return y(Math.max(0, d.value)); })
          .attr("height", function (d) { return Math.abs(y(d.value) - y(0)); });

        for (i = 0; i < data.length; i++) {
          svg.select(".targetLine" + i)
            .transition()
            .duration(transitionDuration)
            .attr("d", lineFunction_linear(metricList, i));
         };

        for (i = 0; i < data.length; i++) {
          svg.selectAll(".symbol" + i)
            .transition()
            .duration(transitionDuration)
            .attr("transform", function (k) {
              return "translate(" + (x0(k) + x1(data[i][attributeName]) + x1.rangeBand() / 2) + ","
                + y(+data[i][target]) + ")";
            });
        };

        log = false;
      }
    });

    invisibleRect.on('mouseover', function () {
      debugger;
      var coords = d3.mouse(invisibleRect.node());
      var hoverHelp = svg.append('g').attr('id', 'hoverHelp');

      var x = coords[0];
      var y = coords[1];

      var triangleSize = 25;
      var rectWidth = 200;
      var rectHeight = 50;

      hoverHelp.append('polygon')
        .attr({
          'fill': '#3F0040',
          'opacity': 0.5,
          'points': x + ',' + y + ' ' + (x + triangleSize) + ',' + (y - triangleSize) + ' ' + (x + triangleSize + rectWidth) + ',' + (y - triangleSize) + ' ' + (x + triangleSize + rectWidth) + ',' + (y - triangleSize + rectHeight) + ' ' + (x + triangleSize) + ',' + (y - triangleSize + rectHeight) + ' ' + (x + triangleSize) + ',' + (y + triangleSize),
          'stroke-width': 3,
          'stroke': '#FD00FF',
          'stroke-linecap': 'round'
        });

      hoverHelp.append('text')
        .attr({
          'x': x + triangleSize + rectWidth / 2,
          'y': y - triangleSize + rectHeight / 2,
          'text-anchor': 'middle',
          'dominant-baseline': 'central',
          'fill': '#FFFFFF',
          'text-weight': 'bold'
        })
        .text('Click to toggle axis.');
    });

    invisibleRect.on('mouseout', function () {
      try {
        hoverHelp.remove();
      } catch (ReferenceError) {
        console.log("There's no hoverHelp right now.");
      }
    });