d3鼠標事件不起作用

Question

我無法在mousedown，mouseup和mousemove上觸發d3事件。 當我將其移至生產服務器時，該代碼將不起作用（否則，使用簡單的index.html以及僅一個jquery和d3庫，即可正常工作）。 在生產文件夾中，還有其他用於可拖動元素的庫，這些庫與svg和d3實現無關，我試圖在這里完成。 我只是認為它們可能是與鼠標事件沖突的可能原因：（任何幫助將不勝感激）

這是我們的代碼（在生產環境之外可以正常工作）：我試圖在鼠標移動時畫一條線：

    var container  = d3.select('svg');

    function draw(selection){
        var xy0, 
            path, 
            keep = false, 
            line = d3.svg.line()
                     .x(function(d){ return d[0]; })
                     .y(function(d){ return d[1]; });
        selection
            .on('mousedown', function(){      

            console.log("100")  

              console.log('THIS', this)
                keep = true;                     
                xy0 = d3.mouse(this);
                console.log('xy0', xy0)
                path = d3.select('svg')
                         .append('path')
                         .attr('d', line([xy0, xy0]))
                         .style({'stroke': 'red', 'stroke-width': '3px'});

                         console.log(path)


            })
            .on('mouseup', function(){ 
                var xUp = d3.mouse(this);

                console.log('xUp', xUp)

                keep = false; 
            })
            .on('mousemove', function(){ 
                if (keep) {
                    Line = line([xy0, d3.mouse(this)
                                .map(function(x){ return x - 1; })]);
                    console.log(Line);
                    path.attr('d', Line);
                }

                var xMove = d3.mouse(this);

                    console.log('x', xMove[0]);
                    console.log('y', xMove[1]);

                console.log('xMove', xMove)
            });
    }

 d3.select('svg').call(draw);

這是HTML

            <image xlink:href="dot.svg" x="7%" y="35%" height="20px" width="20px"></image>
             <image xlink:href="dot.svg" x="36%" y="35%" height="20px" width="20px"></image>
            <image  xlink:href="dot.svg" x="65%" y="35%" height="20px" width="20px"></image>


            <image xlink:href="dot.svg" x="7%" y="70%" height="20px" width="20px"></image>
             <image xlink:href="dot.svg" x="36%" y="70%" height="20px" width="20px"></image>
            <image  xlink:href="dot.svg" x="65%" y="70%" height="20px" width="20px"></image>

         </svg>

Answer 1

解決。 在同一視圖中有一個可拖動組件，將其刪除后，上述問題就消失了。 讓我想到的是，d3和jQuery的鼠標事件之間可能會發生沖突。