Question

我遇到了一些d3过渡问题。单击SVGCircleElement时，我希望SVGTextElement与圆圈相同的SVGGE元素中的淡入淡出，一旦结束，我想要一个信息框出现。这是相关的代码。

// code where vizNode is defined

// Circle is the SVGCircleElement
var circle = vizNode.svgNode

var drag = d3.drag()
    .on('start', function () {
        dragStart(this)
    })
    .on('drag', dragMove)
    .on('end', dragEnd);

function dragStart(d) { //drag start logic }
function dragMove(d) { //drag move logic }
function dragEnd(d) { //drag end logic }

// Call drag method on SVGCircleElement
d3.select(circle).call(drag)

// g is the SVGGElement containing the SVGTextElement with the circle and class '.node-text'
var g = d3.select(circle.parentNode) 

g.selectAll('.node-text').transition()
    .duration(longFade)
    .style('opacity', 0)
    .on('start', function () {
        vizNode.infoBoxFadeIn = true
    })
    .on('end', function () {
        vizNode.infoBoxFadeIn = false
        drawNewInfoBox(vizNode)
    })

//drawNewInfoBox method

这首先按预期工作。但是，用户可以使用不同的方法拖动圆圈。在此之后，上面的方法突然停止工作 - 不再调用.on（＆＃39; start）函数。

现在，最大的问题是我不知道如何调试它。所有相关变量和对象保持不变，拖动后我尝试转换的d3选项仍然存在。

是否有人提供有关如何处理此问题的提示？

编辑：更新了代码以包含拖动方法

如何调试d3转换

0 个答案: