Question

这是我第一次使用d3.js. 我有一个变量i（整数）和一个像这样的html：

＆＃13;

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

＆＃13;

我想选择rect属性data-r的所有= i元素，并将data-value属性放在数组arr中。

因此，例如，如果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吸气剂速度较慢。

以下是使用SVG和i = 0的演示：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

普通香草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

您可以使用.querySelectorAll（）：

.then(function (friends) {
    if (friends) {
        const newResult = [];
        friends.forEach((r) => {
            if (r.UserID == userFound.id) {
                models.User.findOne({
                        where: {
                            id: r.idFriend
                        }
                    })
                    .then(function(userFound) {
                        newResult.push({
                            id: r.id,
                            user: {
                                id: r.User.id,
                                email: userFound.email,
                                username: userFound.username
                            }

                        });
                        console.log(newResult)
                    })
            } else
                newResult.push({
                    id: r.id,
                    user: {
                        id: r.User.id,
                        email: r.User.email,
                        username: r.User.username
                    }
                });
            console.log(newResult)
        });
        res.status(200).json(newResult);
    }
}

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

3 个答案: