Get attribute value of elements by the value of another attribute

Question

It's the first time I use d3.js. I have a variable i (integer) and an html like that:

 <svg width="445" height="430"> <g transform="translate(150,50)"> <defs>...</defs> <g class="rowLabels">...</g> <g class="colLabels">...</g> <g> <rect data-value="96.60" data-r="0" data-c="0" class="cell cr0 cc0" width="17" height="17" rx="4" ry="4" x="0" y="0" fill="rgb(144, 220, 162)" style="stroke: none;"></rect> </g> <g> <rect data-value="95.80" data-r="0" data-c="1" class="cell cr0 cc1" width="17" height="17" rx="4" ry="4" x="17" y="0" fill="rgb(127, 215, 169)" style="stroke: none;"></rect> </g> <g> <rect data-value="95.90" data-r="0" data-c="2" class="cell cr0 cc2" width="17" height="17" rx="4" ry="4" x="34" y="0" fill="rgb(129, 216, 168)" style="stroke: none;"></rect> </g> <g> <rect data-value="96.60" data-r="0" data-c="3" class="cell cr0 cc3" width="17" height="17" rx="4" ry="4" x="51" y="0" fill="rgb(144, 220, 162)" style="stroke: none;"></rect> </g> <g> <rect data-value="96.80" data-r="0" data-c="4" class="cell cr0 cc4" width="17" height="17" rx="4" ry="4" x="68" y="0" fill="rgb(149, 222, 160)" style="stroke: none;"></rect> </g> <g> <rect data-value="96.50" data-r="0" data-c="5" class="cell cr0 cc5" width="17" height="17" rx="4" ry="4" x="85" y="0" fill="rgb(142, 220, 163)" style="stroke: none;"></rect> </g> <g> <rect data-value="96.50" data-r="0" data-c="6" class="cell cr0 cc6" width="17" height="17" rx="4" ry="4" x="102" y="0" fill="rgb(142, 220, 163)" style="stroke: none;"></rect> </g> <g> <rect data-value="96.70" data-r="0" data-c="7" class="cell cr0 cc7" width="17" height="17" rx="4" ry="4" x="119" y="0" fill="rgb(146, 221, 161)" style="stroke: none;"></rect> </g> <g> <rect data-value="96.30" data-r="0" data-c="8" class="cell cr0 cc8" width="17" height="17" rx="4" ry="4" x="136" y="0" fill="rgb(138, 218, 165)" style="stroke: none;"></rect> </g> <g> <rect data-value="96.10" data-r="0" data-c="9" class="cell cr0 cc9" width="17" height="17" rx="4" ry="4" x="153" y="0" fill="rgb(134, 217, 166)" style="stroke: none; stroke-width: 1px;"></rect> </g> <g> <rect data-value="96.30" data-r="0" data-c="10" class="cell cr0 cc10" width="17" height="17" rx="4" ry="4" x="170" y="0" fill="rgb(138, 218, 165)" style="stroke: none;"></rect> </g> <g> <rect data-value="96.10" data-r="0" data-c="11" class="cell cr0 cc11" width="17" height="17" rx="4" ry="4" x="187" y="0" fill="rgb(134, 217, 166)" style="stroke: none;"></rect> </g> <g> <rect data-value="96.10" data-r="0" data-c="12" class="cell cr0 cc12" width="17" height="17" rx="4" ry="4" x="204" y="0" fill="rgb(134, 217, 166)" style="stroke: none;"></rect> </g> <g> <rect data-value="95.74" data-r="0" data-c="13" class="cell cr0 cc13" width="17" height="17" rx="4" ry="4" x="221" y="0" fill="rgb(126, 215, 169)" style="stroke: none;"></rect> </g> <g> <rect data-value="94.71" data-r="0" data-c="14" class="cell cr0 cc14" width="17" height="17" rx="4" ry="4" x="238" y="0" fill="rgb(110, 207, 177)" style="stroke: none;"></rect> </g> <g> <rect data-value="93.43" data-r="0" data-c="15" class="cell cr0 cc15" width="17" height="17" rx="4" ry="4" x="255" y="0" fill="rgb(112, 194, 179)" style="stroke: none;"></rect> </g> <g> <rect data-value="93.33" data-r="0" data-c="16" class="cell cr0 cc16" width="17" height="17" rx="4" ry="4" x="272" y="0" fill="rgb(112, 193, 179)" style="stroke: none;"></rect> </g> <g> <rect data-value="97.50" data-r="1" data-c="0" class="cell cr1 cc0" width="17" height="17" rx="4" ry="4" x="0" y="17" fill="rgb(164, 226, 154)" style="stroke: none;"></rect> </g> <g> <rect data-value="98.80" data-r="1" data-c="1" class="cell cr1 cc1" width="17" height="17" rx="4" ry="4" x="17" y="17" fill="rgb(191, 234, 143)" style="stroke: none;"></rect> </g> <g> <rect data-value="" data-r="1" data-c="2" class="cell cr1 cc2" width="17" height="17" rx="4" ry="4" x="34" y="17" fill="url(#pattern-stripes)" style="stroke: none;"></rect> </g> <g> <rect data-value="93.20" data-r="1" data-c="3" class="cell cr1 cc3" width="17" height="17" rx="4" ry="4" x="51" y="17" fill="rgb(113, 192, 179)" style="stroke: none;"></rect> </g> <g> <rect data-value="98.20" data-r="1" data-c="4" class="cell cr1 cc4" width="17" height="17" rx="4" ry="4" x="68" y="17" fill="rgb(178, 230, 148)" style="stroke: none;"></rect> </g> </g> </svg> 

I want to select all the rect element with data-r attribute = i and put their data-value attribute inside the array arr .

So, for example, if i = 0 then arr = [96.60, 95.80, 95.90, 96.60, ...] . arr contains only data-value with data-r = 0 .

How can I do that? I try:

console.log(d3.selectAll('.data-r' + i).attr('data-value'));
console.log((d3.select('.data-r') == i)).attr('data-value');
console.log((d3.select('.data-r') = i)).attr('data-value');

but nothing works.

I prefer not to use jQuery, but if it's necessary ok.

Thanks!

Answer 1

Use d3.selectAll with a CSS attribute selection:

d3.selectAll("rect[data-r='" + i + "']")

Have in mind that, in the three attempts described in your question, you're selecting a class .

Then, using a selection.each , just push the values in the array with a getter:

selection.each(function() {
    arr.push(d3.select(this).attr("data-value"))
});

Or just (thanks to @altocumulus ):

selection.each(function() {
    arr.push(this.dataset.value)
});

Which is a good alternative, since D3 getters are slower.

Here is a demo using your SVG and i = 0 :

 var i = "0"; var arr = []; var sel = d3.selectAll("rect[data-r='" + i + "']") .each(function() { arr.push(this.dataset.value) }) console.log(arr) 

 <script src="https://d3js.org/d3.v5.min.js"></script> <svg width="445" height="430"> <g> <rect data-value="96.60" data-r="0" data-c="0" class="cell cr0 cc0" width="17" height="17" rx="4" ry="4" x="0" y="0" fill="rgb(144, 220, 162)" style="stroke: none;"></rect> </g> <g> <rect data-value="95.80" data-r="0" data-c="1" class="cell cr0 cc1" width="17" height="17" rx="4" ry="4" x="17" y="0" fill="rgb(127, 215, 169)" style="stroke: none;"></rect> </g> <g> <rect data-value="95.90" data-r="0" data-c="2" class="cell cr0 cc2" width="17" height="17" rx="4" ry="4" x="34" y="0" fill="rgb(129, 216, 168)" style="stroke: none;"></rect> </g> <g> <rect data-value="96.60" data-r="0" data-c="3" class="cell cr0 cc3" width="17" height="17" rx="4" ry="4" x="51" y="0" fill="rgb(144, 220, 162)" style="stroke: none;"></rect> </g> <g> <rect data-value="96.80" data-r="0" data-c="4" class="cell cr0 cc4" width="17" height="17" rx="4" ry="4" x="68" y="0" fill="rgb(149, 222, 160)" style="stroke: none;"></rect> </g> <g> <rect data-value="96.50" data-r="0" data-c="5" class="cell cr0 cc5" width="17" height="17" rx="4" ry="4" x="85" y="0" fill="rgb(142, 220, 163)" style="stroke: none;"></rect> </g> <g> <rect data-value="96.50" data-r="0" data-c="6" class="cell cr0 cc6" width="17" height="17" rx="4" ry="4" x="102" y="0" fill="rgb(142, 220, 163)" style="stroke: none;"></rect> </g> <g> <rect data-value="96.70" data-r="0" data-c="7" class="cell cr0 cc7" width="17" height="17" rx="4" ry="4" x="119" y="0" fill="rgb(146, 221, 161)" style="stroke: none;"></rect> </g> <g> <rect data-value="96.30" data-r="0" data-c="8" class="cell cr0 cc8" width="17" height="17" rx="4" ry="4" x="136" y="0" fill="rgb(138, 218, 165)" style="stroke: none;"></rect> </g> <g> <rect data-value="96.10" data-r="0" data-c="9" class="cell cr0 cc9" width="17" height="17" rx="4" ry="4" x="153" y="0" fill="rgb(134, 217, 166)" style="stroke: none; stroke-width: 1px;"></rect> </g> <g> <rect data-value="96.30" data-r="0" data-c="10" class="cell cr0 cc10" width="17" height="17" rx="4" ry="4" x="170" y="0" fill="rgb(138, 218, 165)" style="stroke: none;"></rect> </g> <g> <rect data-value="96.10" data-r="0" data-c="11" class="cell cr0 cc11" width="17" height="17" rx="4" ry="4" x="187" y="0" fill="rgb(134, 217, 166)" style="stroke: none;"></rect> </g> <g> <rect data-value="96.10" data-r="0" data-c="12" class="cell cr0 cc12" width="17" height="17" rx="4" ry="4" x="204" y="0" fill="rgb(134, 217, 166)" style="stroke: none;"></rect> </g> <g> <rect data-value="95.74" data-r="0" data-c="13" class="cell cr0 cc13" width="17" height="17" rx="4" ry="4" x="221" y="0" fill="rgb(126, 215, 169)" style="stroke: none;"></rect> </g> <g> <rect data-value="94.71" data-r="0" data-c="14" class="cell cr0 cc14" width="17" height="17" rx="4" ry="4" x="238" y="0" fill="rgb(110, 207, 177)" style="stroke: none;"></rect> </g> <g> <rect data-value="93.43" data-r="0" data-c="15" class="cell cr0 cc15" width="17" height="17" rx="4" ry="4" x="255" y="0" fill="rgb(112, 194, 179)" style="stroke: none;"></rect> </g> <g> <rect data-value="93.33" data-r="0" data-c="16" class="cell cr0 cc16" width="17" height="17" rx="4" ry="4" x="272" y="0" fill="rgb(112, 193, 179)" style="stroke: none;"></rect> </g> <g> <rect data-value="97.50" data-r="1" data-c="0" class="cell cr1 cc0" width="17" height="17" rx="4" ry="4" x="0" y="17" fill="rgb(164, 226, 154)" style="stroke: none;"></rect> </g> <g> <rect data-value="98.80" data-r="1" data-c="1" class="cell cr1 cc1" width="17" height="17" rx="4" ry="4" x="17" y="17" fill="rgb(191, 234, 143)" style="stroke: none;"></rect> </g> <g> <rect data-value="" data-r="1" data-c="2" class="cell cr1 cc2" width="17" height="17" rx="4" ry="4" x="34" y="17" fill="url(#pattern-stripes)" style="stroke: none;"></rect> </g> <g> <rect data-value="93.20" data-r="1" data-c="3" class="cell cr1 cc3" width="17" height="17" rx="4" ry="4" x="51" y="17" fill="rgb(113, 192, 179)" style="stroke: none;"></rect> </g> <g> <rect data-value="98.20" data-r="1" data-c="4" class="cell cr1 cc4" width="17" height="17" rx="4" ry="4" x="68" y="17" fill="rgb(178, 230, 148)" style="stroke: none;"></rect> </g> </svg> 

Answer 2

Plain Vanilla javascript:

//Grab all rect elements
const rects = document.getElementsByTagName('rect');
let myArray = [];

//Iterate your rect elements, if the element's attribute data-r === i push
//it's data-value attribute value into array
for(let x = 0; x < rects.length; x++){
    if(rects[x].getAttribute("data-r") === i.toString()){
        myArray.push(rects[x].getAttribute("data-value"));
    }
}

Answer 3

You could use .querySelectorAll():

const i = "0";
document.querySelectorAll(`rect[data-r='${i}'`);