javascript - D3 v4 单击可拖动的元素

Question

我已经创建了一个包含 DOM 项而不是节点的力图，但现在我希望能够单击它们以将我单击的那个作为示例居中。整个图表是可拖动的，但只要暗示了拖动，我就无法点击可拖动的元素，如果我评论拖动功能我可以点击就好了。

在这个例子中，一切都在移动，但 alert() 不会被触发放置在图像元素上。如果我从 newNode 元素中删除拖动，则会触发 alert()。

function restart() {
                //If there were already created nodes, remove them
                if (created) {
                    created.remove();
                }

                // Apply the general update pattern to the nodes.
                node = node.data(self.nodes(), function(d) { return d.id; });

                //Add a group
                //When dragged you're not able to click on anything
                var newNode = node.enter().append("g").attr("class", "node").attr("transform", "translate(-42,-55)").call(d3.drag()
                         .on("start", dragstarted)
                         .on("drag", dragged)
                         .on("end", dragended));

                //Add background rect
                nodeSquare = newNode.append("rect")
                .attr("width", "84px")
                .attr("height", "110px")
                .style("fill", 'red');

                //Add an image
                imageNode = newNode.append("image")
                      .attr("xlink:href", function (d) { return d.imageUrl; })
                      .attr("transform", "translate(2,2)")
                      .attr("height", 80)
                      .attr("width", 80);

                imageNode.on("click", function (d) { alert("center me!"); d3.event.stopPropagation();});
                 //TODO: ALIGN CENTER
                //.attr("x", function(d){ if(d.name == self.entityData.properties.Title) return 0;}).attr("y", function(d){ if(d.name == self.entityData.properties.Title) return 0;})

                //Add text
                nodeText = newNode.append("a")
                    .attr("width", 2)
                    .attr("word-wrap", "break-word")
                    .attr("height", 10)
                    .attr("href", function (d) { if (d.href) return d.href; else return "https://i.ytimg.com/vi/jhvAXT9R_3U/hqdefault.jpg"; })
                    .style('stroke', 'white')
                    .append("text").text(function (d) { return d.name.substring(0, 10); }).attr("dy", function (d) { return +100 }).attr("dx", function (d) { return +10; });
                //Change the text style to be less thick
                nodeText.style("stroke-width", 0.5).style("font-size", "12px");

                //save the created nodes to be able to delete them as soon as this function is called upon again
                created = newNode;

                // Apply the general update pattern to the links.
                link = link.data(self.links());
                link.exit().remove();
                link = link.enter().append("line").merge(link);

                // Update and restart the simulation.
                simulation.nodes(self.nodes());
                simulation.force("link").links(self.links());
                simulation.alpha(1).restart();
            }

Answer 1

根本原因是 d3-drag 使用 'mounsemove' 事件触发 'drag' 事件。但是在 Windows 上的 Chrome 中，即使只是单击一个节点，也会始终触发 'mousemove' 事件。所以click事件被d3-drag停止了(见其文档:https://github.com/search?utf8=%E2%9C%93&q=d3-drag)

这是 Chrome 的一个错误:https://bugs.chromium.org/p/chromium/issues/detail?id=161464它创建于 2012 年 11 月，但在 2017 年 1 月 30 日标记为“已修复”。所以我检查了 Chrome 版本并确实找到了更新。在我将 Chrome 更新到 56.0 版本后，错误消失了......令人惊讶的是，这个错误在 4 年内得到了修复。

但是，我们希望人们能及时更新他们的 Chrome。