不能悬停在 path.area 后面的点上
锡沃
正如标题所提到的，我们无法将鼠标悬停在 path.area 后面的点上。
情况如下
如果我们将鼠标悬停在蓝线和黄线上，我们可以获得工具提示，但是如果我们将鼠标悬停在红线上，我们只能从第一个点和最后一个点获得工具提示。
代码如下：
let nix = crossfilter();
timeseriesFiltered.forEach(ts => {
ndx.add(ts.values.map(function(d) {
let temp = JSON.parse(JSON.stringify(objTemplate));
temp[ts.place] = d.value;
temp.date = new Date(d.timestamp);
return temp;
}));
});
let dimDate = ndx.dimension(dc.pluck('date'));
let lineChartGroups = [];
timeseriesFiltered.forEach((ts, index) => {
let group = dimDate.group().reduceSum(dc.pluck(ts.place));
let lineChart = dc.lineChart(composite)
.dimension(dimDate)
.renderDataPoints(true)
.renderArea(true)
.defined(d => {
return d.y != 0;
})
.colors(this.colors[index])
.group(group, this.setName(ts.place));
lineChartGroups.push(lineChart);
})
let chart = composite
.width(width)
.height(300)
.margins({top: 30, right: 60, bottom: 30, left: 60})
.x(d3.scaleTime().domain([new Date(minDate), new Date(maxDate)]))
.yAxisLabel(timeseriesFiltered[0].unit)
.elasticY(true)
.mouseZoomable(true)
.brushOn(false)
.clipPadding(10)
.legend(dc.legend().x(80).y(20).itemHeight(13).gap(5))
._rangeBandPadding(1)
.compose(lineChartGroups);
chart.render();
我们尝试通过使用以下语句来提高所有圆点：
d3.selectAll('circle.dot').raise();
但它没有用。有什么建议吗？
戈登
我不确定renderArea在复合图表中使用它是否是一个好主意；正如你所看到的，颜色混在一起变成了棕色，并不清楚它应该传达什么。
我认为renderArea使用堆叠图表效果更好，其中每种颜色覆盖的区域都具有某种意义。
也就是说，解决您所看到的问题非常容易。
提高点不起作用的原因是因为复合图表的每个子项都在自己的图层中。因此，提高圆点只会使它们位于该图表的顶部（它们已经位于该位置）。
相反，您可以禁用填充区域的鼠标交互：
path.area {
pointer-events: none;
}
由于填充区域之前不是交互式的，因此不应损失太多，但您可能希望更加保守并使用选择器将规则限制到特定图表 #composite-chart path.area
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
如何使 <div> 在悬停在图像的 <area> 上时出现
- 2
为什么将鼠标悬停在正常图像后面的图像上？
- 3
jQuery悬停在象限上
- 4
悬停在图像上的图标
- 5
CSS悬停在点上以显示图像-不悬停在图像上
- 6
CSS悬停在点上以显示图像-不悬停在图像上
- 7
将鼠标悬停在其前面的背景上
- 8
在锚点悬停时也会触发将鼠标悬停在最近的锚点上
- 9
悬停在锚点上时显示的CSS div；将鼠标悬停在div上时保持可见
- 10
鼠标悬停在图像上
- 11
悬停在div上时div重叠
- 12
悬停在表中的<hr>上
- 13
将鼠标悬停在jQuery上
- 14
小图像悬停在CSS上
- 15
jQuery悬停在图像上的效果
- 16
将鼠标悬停在SVG上
- 17
悬停在无形区域上的动画
- 18
物料表检测悬停在行上
- 19
图像悬停在Twitter Bootstrap上
- 20
鼠标悬停在图像上
- 21
HTML，CSS悬停在图片上
- 22
悬停在表格行上的效果
- 23
检测到悬停在JTextArea上
- 24
使Div类悬停在页面加载上
- 25
导航悬停在背景图像上
- 26
将鼠标悬停在div上
- 27
正确悬停在等距图块精灵上
- 28
将文字悬停在图片上
- 29
悬停在文字上的怪异笔触
我来说两句