Question

我正在尝试构建一个原型，以便在用户点击条形图时突出显示条形图上的多个点。我无法选择多个点。

如果我尝试单独更改样式，则会突出显示单击的栏。我想使用css类.solid所以下次用户点击它时我可以查找该类的项目并保留它们。以下工作，但它单独设置不透明度

 d3.selectAll(k).style("opacity", 1)

如果我尝试添加一个类，就像使用.classed一样。

 d3.selectAll(k).classed('solid', true);

我已经分享了一个用于显示问题的plunker链接。有人可以让我知道如何将css类应用于多个项目，然后每次用户单击一个栏以将新项目添加到突出显示的项目时，使用selectAll访问项目。谢谢你的帮助。

C3 Plunker

Answer 1

这可以按预期工作：以你的风格添加：

.solid{
  opacity:0.3 !important;
}

然后在你的点击中按照你的建议去做。

      onclick: function(e) {
        //add solid style to all bars.
        d3.selectAll(".c3-shape").classed("solid", true);//add to all bar this class
        var k = ".c3-shape-" + e.index;
        //make the clicked bar opacity 1
        d3.selectAll(k).classed("solid", false);//remove class solid from the clicked bar.
      }

工作代码here

c3单击并突出显示多个选择

1 个答案: