CODEWITHSUNDEEP
javascriptd3.jssvg
Jane Wayne
Jane Wayne

Reputation: 8855

Removing SVG element in D3 that is draggable results in Cannot read property 'ownerSVGElement' of null

I am simply trying add and remove elements (nodes/circles) using d3 on a SVG element. However, my code keeps generating the following exception.

Uncaught TypeError: Cannot read property 'ownerSVGElement' of null
    at d3_mousePoint (VM2163 d3.js:1127)
    at d3.mouse (VM2163 d3.js:1122)
    at moved (VM2163 d3.js:1177)
    at VM2163 d3.js:1084
d3_mousePoint @ VM2163 d3.js:1127
d3.mouse @ VM2163 d3.js:1122
moved @ VM2163 d3.js:1177
(anonymous) @ VM2163 d3.js:1084

The problem seems to be with adding dragging behavior to the elements because if I remove .call(someDragFunction) then adding and removing elements doesn't generate that exception (but then, of course, I can't drag those elements around the SVG canvas).

An example is shown here http://plnkr.co/edit/DnSBXSjXhQ2AJsGYvWxE?. If you click "+node" and click on the SVG box, a node will be drawn. If you click "-node" and click on a node/circle drawn, that node will be removed. Only when the last node is attempted to be removed does the exception show.

Any ideas on what I'm doing wrong? Btw, I'm using D3 v3.5.3.

Upvotes: 2

Views: 1889

Answers (1)

Jahangir Alam
Jahangir Alam

Reputation: 801

Answer Found

My console error is as follows:

d3.v3.min.js:1 Uncaught TypeError: Cannot read property 'ownerSVGElement' of null
    at J (d3.v3.min.js:1)
    at ao.mouse (d3.v3.min.js:3)
    at a (d3.v3.min.js:3)
    at d3.v3.min.js:1

My svg element 

<svg id="charts" width="1356" height="579"></svg>

I have added g element inside svg with drag behavior as follows:

var container = d3.select("#charts")
        .append("g")
        .data([ {"x":node_pos_x, "y":node_pos_y} ])
        .attr("width", node_width)
        .attr("height", node_height)
        .attr("class", classname)
        .attr("id", "node_1")
        .attr("transform", "translate(" + node_pos_x + "," + node_pos_y + ")")
        .call(in_editor_drag);

If I run the following line to remove g#node_1 I got the above console error like you.

d3.select('g#node_1').remove();

the solution is

d3.select('g#node_1').on('mousedown.drag', null);

Now I can remove the g element without any console error.

I found it from here

How to remove d3.behavior.drag().on("drag",...) event handler

Upvotes: 3

Related Questions