javascript - d3 ClassedStyling with Multiple IDs - Stack Overflow

admin管理员组

文章数量:1025235

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.

• javascript
• d3.js

Share Improve this question Follow edited Mar 23, 2017 at 17:47 Arash Howaida asked Mar 23, 2017 at 17:41 Arash HowaidaArash Howaida 2,61744 gold badges2323 silver badges5656 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

 |  Show 2 more ments

2 Answers 2

Sorted by: Reset to default 5

The 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>

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.

• javascript
• d3.js

Share Improve this question Follow edited Mar 23, 2017 at 17:47 Arash Howaida asked Mar 23, 2017 at 17:41 Arash HowaidaArash Howaida 2,61744 gold badges2323 silver badges5656 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

 |  Show 2 more ments

2 Answers 2

Sorted by: Reset to default 5

The 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>

本文标签： javascriptd3 ClassedStyling with Multiple IDsStack Overflow