Question

我只是尝试在SVG元素上使用d3添加和删除元素（节点/圆圈）。但是，我的代码不断生成以下异常。

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

问题似乎是向元素添加拖动行为，因为如果我删除.call(someDragFunction)，那么添加和删除元素不会生成该异常（但当然，我不能拖动这些元素SVG画布。）

此处显示了一个示例http://plnkr.co/edit/DnSBXSjXhQ2AJsGYvWxE？如果单击“+ node”并单击SVG框，将绘制一个节点。如果单击“-node”并单击绘制的节点/圆，则将删除该节点。仅当尝试删除最后一个节点时才会显示异常。

关于我做错的任何想法？顺便说一句，我正在使用D3 v3.5.3。

Answer 1

找到答案

我的控制台错误如下：

series.unstack(1)

second index             bed1  bed2
first index third index            
room1       all             3     2
            blankets        1     1
            pillows         2     1
room2       all             4     3
            blankets        2     2
            pillows         2     1

我的svg元素

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

我在svg中添加了带有拖动行为的g元素，如下所示：

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

如果我运行以下行来删除g＃node_1，我会收到上述控制台错误。

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);

解决方案是

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

现在我可以删除g元素而不会出现任何控制台错误。

我是从这里找到的

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

删除D3中可拖动的SVG元素会导致无法读取null的属性“ownerSVGElement”

1 个答案: