javascript - 通过另一个属性的值获取元素的属性值

Question

这是我第一次使用d3.js。 我有一个变量 i (整数)和一个像这样的 html:

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

我想选择所有具有 data-r 属性 = i 的 rect 元素，并放置它们的 data-value数组 arr 内的 code> 属性。

例如，如果i = 0，则arr = [96.60, 95.80, 95.90, 96.60, ...]。 arr 仅包含 data-value 且 data-r = 0。

我怎样才能做到这一点？ 我尝试:

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');

但没有任何效果。

我不想使用 jQuery，但如果有必要的话也可以。

谢谢!

Answer 1

使用 d3.selectAll 进行 CSS 属性选择:

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

请记住，在您的问题中描述的三次尝试中，您正在选择一个类。

然后，使用 selection.each，只需使用 getter 将值推送到数组中即可:

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

或者只是(感谢 @altocumulus ):

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

这是一个很好的选择，因为 D3 getter 速度较慢。

这是使用 SVG 和 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>