d3 具有多个 ID 的分类/样式

Ara*_*ida 1 javascript d3.js

虽然多个类可以分配给一个id,但是一个类可以分配多个id吗?如果是,那么我将节省大量时间/计算资源。

我试过:

d3.select('#id1','#id2').classed('my_class',true);
Run Code Online (Sandbox Code Playgroud)

我也尝试过这样的 js 样式:

d3.select('#id1','#id2').style('display','none');
Run Code Online (Sandbox Code Playgroud)

只有第一个 id 有效。

有没有一种简洁的方法来处理这种情况?如果没有某种形式的解决方法,我会感到惊讶。我只是在这种情况下找不到一个。

Ger*_*ado 5

问题下面的评论包含解决问题的所有信息。不过,对于未来的读者,我想在这里写下一些观点。

首先:一定要阅读文档。除少数例外,它包含您需要的所有信息。例如,让我们看看它关于select的内容:

选择与指定选择器字符串匹配的第一个元素。(强调我的)

现在让我们看看你的代码:

d3.select('#id1','#id2')
//              ^--------- two strings, separated by a comma
Run Code Online (Sandbox Code Playgroud)

那不是一个字符串。这是一个字符串:

d3.select('#id1, #id2')
//              ^--------- just one string here!
Run Code Online (Sandbox Code Playgroud)

第二个问题:select选择与字符串匹配的第一个元素。所以,你想要selectAll,不想要select

解决方案:它必须是:

d3.selectAll("#id1, #id")
Run Code Online (Sandbox Code Playgroud)

这是一个演示,点击按钮:

d3.select('#id1','#id2')
//              ^--------- two strings, separated by a comma
Run Code Online (Sandbox Code Playgroud)
d3.select('#id1, #id2')
//              ^--------- just one string here!
Run Code Online (Sandbox Code Playgroud)

  • 由于OP特别关注性能问题,值得注意的是,这种方法的性能远远优于Nobita的[answer](http://stackoverflow.com/a/42986738/4235784)提出的解决方案。尽管如此,不可否认,这看起来更干净、更直观,而且像往常一样,有一个很好的解释。 (3认同)
  • @Nobita虽然这可能直观上看起来合乎逻辑,但你的方法实际上比 Gerardo 的方法*方式*快。在 Chrome 上执行我的[性能测试](https://jsperf.com/d3-multi-select-by-id),测试用例 #2(实现您的答案)比此答案的方法快十倍以上。用本机“document.getElementById()”替换内部选择将使速度进一步加倍。不同浏览器的结果有所不同,浏览器*esque* IE 11 是最慢的,但都比使用复杂的选择器字符串更快。 (2认同)