使用D3回调让SVG走到前面的麻烦

Question

如何让JG在Javascript中脱颖而出？答案是使用D3 moveToFront()或尝试添加script to the html，如下所示：

[<script>
  d3.selectAll('circle').on('mouseenter', function() {
    this.parentElement.appendChild(this);
  });
</script>][2]

然而，我试图让SVG显示它永远不会起作用。现在我知道创建了SVG元素，因为它在click事件中以开发者模式出现。它也是该列表中的最后一个元素。谢谢。

这是一个小提琴，所以你可以看到我在说什么。 https://jsfiddle.net/Math8Gr/fzpqdkwg/

这是有问题的代码：

  $('div.cell').click(function() {
  //create SVG
  var point = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
  //set attributes
  point.setAttribute('cx', 100);
  point.setAttribute('cy', 75);
  point.setAttribute('r', 8);
  point.setAttribute('fill', 'red');
  //Add to parent node
  document.getElementById('grid').appendChild(point, function() {
    var sel = d3.select(point);
    sel.moveToFront();
  });