CODEWITHSUNDEEP
d3.jssvgdrag
hjyanghj
hjyanghj

Reputation: 338

d3 drag works but appear Uncaught TypeError: a.target.className.indexOf is not a function

I practice use d3 to drag svg circle around.

It works except following error appeared in console: "Uncaught TypeError: a.target.className.indexOf is not a function"

What is wrong with my code? Following is my code:

<!DOCTYPE html>
<html lang="zh-Hant">
  <head>
    <title></title>
    <meta charset="UTF-8">
    <script src="http://d3js.org/d3.v3.min.js"></script>
  </head>
<body>
  <p>
    <svg width="300" height="200">
        <circle cx="100" cy="100" r="5" fill="red" />
        <circle cx="50" cy="70" r="5" fill="red" />
    </svg>
  </p>
  <script>
     var drag = d3.behavior.drag()
      .on("drag", function () {
         d3.select(this).attr("cx", d3.event.x)
                        .attr("cy",d3.event.y); 
         });
    d3.selectAll('circle').call(drag);
  </script>
</body>
</html>

Upvotes: 0

Views: 1593

Answers (2)

ow3n
ow3n

Reputation: 6597

The object doesn't contain that method. This will "shim" it.

SVGAnimatedString.prototype.indexOf = function () { return this.baseVal.indexOf.apply(this.baseVal, arguments); }

Upvotes: 0

evenfrost
evenfrost

Reputation: 419

This is because of Google Translate extension. Disabling it solves the problem.

Upvotes: 1

Related Questions