Question

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

我试过了：

d3.select('#id1','#id2').classed('my_class',true);

我也以这种方式尝试了js样式：

d3.select('#id1','#id2').style('display','none');

只有第一个ID有用。

有没有简洁的方法来处理这种情况？如果没有某种形式或形式的解决方法，我会感到惊讶。在这种情况下，我无法找到一个。

Answer 1

问题下方的评论包含解决问题的所有信息。但是，对于未来的读者，我想在这里写点。

首先：始终阅读documentation。除了少数例外，它拥有您需要的所有信息。例如，让我们看看它对select的看法：

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

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

d3.select('#id1','#id2')
//              ^--------- two strings, separated by a comma

这不是一个字符串。这是一个字符串：

d3.select('#id1, #id2')
//              ^--------- just one string here!

第二个问题：select选择与字符串匹配的第一个元素。因此，您需要selectAll，而不是select。

解决方案：必须是：

d3.selectAll("#id1, #id")

这是一个演示，点击按钮：

d3.select("button").on("click", function() {
  d3.selectAll("#c2, #c5").attr("fill", "brown");
})

<script src="https://d3js.org/d3.v4.min.js"></script>
<button>Click me</button>
<svg>
  <circle id="c1" cx="20" cy="30" r="10" fill="teal"></circle>
  <circle id="c2" cx="60" cy="30" r="10" fill="teal"></circle>
  <circle id="c3" cx="100" cy="30" r="10" fill="teal"></circle>
  <circle id="c4" cx="140" cy="30" r="10" fill="teal"></circle>
  <circle id="c5" cx="180" cy="30" r="10" fill="teal"></circle>
</svg>

Answer 2

您可以将ID存储在数组中并映射到它上面

var ids = ['#g1', '#g2']

ids.map(el => d3.select(el).classed('red', true))

请参阅here或下方：

var ids = ['#g1', '#g2']

ids.map(el => d3.select(el).classed('red', true));

div {
  display: inline-block;
  height: 20px;
  width: 300px;
  background: teal;
}

.red {
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="g1"></div>
<div id="g2"></div>
<div id="g3"></div>
<div id="g4"></div>

d3具有多个ID的Classed / Styling

2 个答案: