Question

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

在此示例中，一切都会移动，但alert（）不会被触发放置在图像元素上。如果我从newNode元素中删除了drag，则会触发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'事件来触发'拖'事件。但是在Windows上的Chrome中，即使只是点击一个节点，也会触发'mousemove'事件。因此，通过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。

D3 v4单击可拖动的元素

1 个答案: