D3.js 为什么画笔会阻止dc.js条形图工具提示出现？

我不明白为什么要实施这种行为。

---

有什么好的理由吗？

为了具有刷牙功能，必须在图形顶部绘制一个捕获所有鼠标事件的透明矩形。这将防止任何鼠标事件触发主图形元素上的工具提示事件处理程序，这也是警告保持刷牙行为“打开”将禁用所有其他交互行为的原因

如果您想同时使用这两种行为，请考虑使用布局。该示例使用普通d3，但您可以使用dc.js重新创建它。对于相同的数据，只有两个不同的视图，一个使用画笔，另一个使用工具提示或其他交互功能。

您可以使用阻止画笔的“鼠标悬停”事件，以便启用工具提示。然后在图表上，您可以创建一个自定义的“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);
                });

---

我在使用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);
     });

svg.append（“g”）
.attr（“类”、“刷”）
.打电话（刷子）；
svg.selectAll（'circle'））
.数据（湿度数据）
.输入（）
.append（'圆'）
.attr（'类别'、'湿度点'）
.attr（'cx'，函数（d）{
返回x（d[“日期”]）
})
.attr（'cy'，函数（d）{
返回y（d[‘湿度’]）
})
.attr（'r'，4）
.attr（'fill'，'#428bca'）
.on（“鼠标悬停”，功能（d）{
过渡部（）
.持续时间（200）
.样式（“不透明度”，.9）；
div.html（d.d+'
'+d.City+'、'+d.Country+'
'+d.湿度+'%）
.style（“左”，“d3.event.pageX）+“px”）
.style（“top”，（d3.event.pageY-28）+“px”）；
})
.开启（“鼠标出”，功能（d）{
过渡部（）
.持续时间（1500）
.样式（“不透明度”，0）；
});

---

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

您能否发布一些示例，说明您正在做什么以及它如何不是您想要的？这只是一种一般行为，而不是特定的行为。在我的例子中，我有一个每日销售额的条形图，我想在将鼠标悬停在条形图上时显示一个带有金额的工具提示。但当画笔被激活时，它会阻止工具提示。为了具有画笔功能，必须在图形顶部绘制一个捕获所有鼠标事件的透明矩形。这就是阻止任何鼠标事件触发主图形元素上的工具提示事件处理程序的原因。如果你想要这两种行为，考虑使用[焦点+上下文]（B.OKS.Org/MBOSt/ 1667367）布局。该示例使用普通d3，但您可以使用dc.js重新创建它。只需对同一数据使用两种不同的视图，一种使用画笔，另一种使用工具提示或其他交互方式。谢谢@AmeliaBR。我已经试过了，但是图表没有预期的效果。如果你有时间看这个，那将非常有帮助。回答得好@AmeliaBR。您是否介意将其添加为答案，以便DC.JS不会将其显示为未回答的问题？问题是，画笔上方出现圆圈，这对可用性不好