While multiple classes can be assigned to one id, but can one assign multiple ids to a class? If yes, then I will save a lot of time / putational resources.
I tried:
d3.select('#id1','#id2').classed('my_class',true);
I also tried js styling in this manner:
d3.select('#id1','#id2').style('display','none');
Only the first id works.
Is there a succinct way to handle such a case? I would be surprised if there wasn't a work-around in some shape or form. I just can't find one in this situation.
While multiple classes can be assigned to one id, but can one assign multiple ids to a class? If yes, then I will save a lot of time / putational resources.
I tried:
d3.select('#id1','#id2').classed('my_class',true);
I also tried js styling in this manner:
d3.select('#id1','#id2').style('display','none');
Only the first id works.
Is there a succinct way to handle such a case? I would be surprised if there wasn't a work-around in some shape or form. I just can't find one in this situation.
Share Improve this question edited Mar 23, 2017 at 17:47 Arash Howaida asked Mar 23, 2017 at 17:41 Arash HowaidaArash Howaida 2,6174 gold badges23 silver badges56 bronze badges 7-
2
If d3 uses css/jquery like selection it's probably just
d3.select('#id1, #id2')
edit they do D3 Selecting Elements – Patrick Barr Commented Mar 23, 2017 at 17:48 - Interesting thought. I tried it just now, no dice. Must be slightly different than jquery – Arash Howaida Commented Mar 23, 2017 at 17:51
-
So if I understand correctly, you want to apply some styling to multiple elements whose ids are in the form
id1, id2, id3...
? – sparta93 Commented Mar 23, 2017 at 17:52 - @ArashHowaida If that's not a solution then I'm afraid I can't be of much more help – Patrick Barr Commented Mar 23, 2017 at 17:53
- @sparta93 Actually I just used that since it was easy notation. My real id names are not of any type of pattern. Just names. – Arash Howaida Commented Mar 23, 2017 at 17:57
2 Answers
Reset to default 5The ments below the question have all the information to fix the problem. However, for future readers, I'd like to write some points here.
First of all: always read the documentation. With few exceptions, it has all information you need. For instance, let's see what it says about select:
Selects the first element that matches the specified selector string. (emphases mine)
Now let's see your code:
d3.select('#id1','#id2')
// ^--------- two strings, separated by a ma
That's not a string. This is a string:
d3.select('#id1, #id2')
// ^--------- just one string here!
Second problem: select
selects the first element that matches the string. So, you want selectAll
, not select
.
Solution: it has to be:
d3.selectAll("#id1, #id")
Here is a demo, click the button:
d3.select("button").on("click", function() {
d3.selectAll("#c2, #c5").attr("fill", "brown");
})
<script src="https://d3js/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>
You can store your IDs in an array and map over it
var ids = ['#g1', '#g2']
ids.map(el => d3.select(el).classed('red', true))
See here or here below:
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./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>