Question

我有条形图。我想做同样的选择，但不应该突出显示，而应该绘制线条。有可能吗？

Answer 1

可以结合使用css和javascript。您可以按如下方式为类定义css：

.hiddenLine{ opacity: 0; }

如果您使用条形和线条构建dom作为g元素的子元素，则首先使用条形，然后将线条呈现在它们之上，如下所示：

...
<g class="bar">
  <rect></rect>
  <line></line>
</g>
//more bars
...

以下javascript将创建悬停效果：

d3.select('.bars')
  .on('mouseover', function(d){
    d3.select(this).select('line').classed('hiddenLine', false);
  })
  .on('mouseout', function(d){
    d3.select(this).select('line').classed('hiddenLine', true);
  });

Answer 2

我能想到的最简单的选择是append只要<line> mouseover mouseout一个mouseover一个栏，并在mouseout时删除该行。它与@ckersch提出的解决方案类似，不同之处在于它有更多的开销（您每隔.on("mouseover", function(d){ svg.append("line") .attr("class", "mouseover-line") .attr("x1", x(d[0]) + x.rangeBand()/2) .attr("x2", x(d[0]) + x.rangeBand()/2) .attr("y1", y(0)) .attr("y2", y(d[1])); .style("stroke", "#000") }) .on("mouseout", function(){ d3.selectAll(".mouseover-line").remove(); }); / {{1}}更改一次DOM），但更容易实现并且不会＃39;根本不改变SVG的结构。您可以在附加条形图时添加以下内容：

{{1}}

工作小提琴here。

在图表上悬停元素

2 个答案: