Question

我不明白为什么这种行为得到了实施。有什么好理由吗？

Answer 1

为了具有刷牙功能，必须在图形的顶部绘制捕获所有鼠标事件的透明矩形。这可以防止任何鼠标事件触发主图元素上的工具提示事件处理程序，并且dc.js API警告将“刷子”行为设置为“on”将禁用所有其他交互行为。

如果您想要两种行为，请考虑使用focus + context布局。该示例使用plain d3，但您可以使用dc.js重新创建它。只有两个不同的相同数据视图，一个用画笔，一个用工具提示或其他交互性。

Answer 2

您可以使用https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events来屏蔽“鼠标悬停”事件，以便启用工具提示。然后在图表上，您可以创建一个自定义的“mousedown”事件并将其传递给画笔以启用选择

d3.select('.chartContainer').on('mousedown', function(){
                    brush_elm = self.scrubberContent.select(".brush").node();
                    new_click_event = new Event('mousedown');
                    new_click_event.pageX = d3.event.pageX;
                    new_click_event.clientX = d3.event.clientX;
                    new_click_event.pageY = d3.event.pageY;
                    new_click_event.clientY = d3.event.clientY;
                    brush_elm.dispatchEvent(new_click_event);
                });

Answer 3

我在使用d3代码时遇到了类似的问题。我意识到在刷子事件之后移动工具提示事件可以解决问题。对我来说，它看起来像这样：

 svg.append("g")
     .attr("class", "brush")
     .call(brush);

 svg.selectAll('circle')
     .data(humidity_data)
     .enter()
     .append('circle')
     .attr('class', 'humidity_point')
     .attr('cx', function(d) {
         return x(d['date'])
     })
     .attr('cy', function(d) {
         return y(d['Humidity'])
     })
     .attr('r', 4)
     .attr('fill', '#428bca')
     .on("mouseover", function(d) {
         div.transition()
             .duration(200)
             .style("opacity", .9);
         div.html(d.Custody + '<br>' + d.City + ', ' + d.Country + '<br>' + d.Humidity + '%')
             .style("left", (d3.event.pageX) + "px")
             .style("top", (d3.event.pageY - 28) + "px");
         })
     .on("mouseout", function(d) {
         div.transition()
             .duration(1500)
             .style("opacity", 0);
     });

此代码允许刷牙，但保留了将鼠标悬停在圆形元素上并查看元数据的功能。

为什么画笔会阻止dc.js barChart工具提示出现？

3 个答案: