我正在使用 svg 元素，如下所示
顯示代碼片段
const src = [{
"Name": "Australia",
"Year": 1997,
"Value": 15.540540540540499
},
{
"Name": "Australia",
"Year": 1998,
"Value": 15.540540540540499
},
{
"Name": "Australia",
"Year": 1999,
"Value": 22.4489795918367
},
{
"Name": "Brunei",
"Year": 1998,
"Value": 6.4516129032258096
},
{
"Name": "Brunei",
"Year": 2017,
"Value": 9.0909090909090899
},
{
"Name": "Brunei",
"Year": 2018,
"Value": 9.0909090909090899
},
{
"Name": "Cambodia",
"Year": 1997,
"Value": 5.8333333333333304
},
{
"Name": "Cambodia",
"Year": 2017,
"Value": 5.8333333333333304
},
{
"Name": "Cambodia",
"Year": 2021,
"Value": 8.1967213114754092
}
];
//this value gets generated dynamically based on previous calculations
const yr = 1998;
//pick up the associated data that has the same yr
const filt = src.filter(d => d.Year == yr).sort((x, y) => x.Name.localeCompare(y.Name))
console.log(filt);<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="container" class="svg-container"></div>
<svg viewBox="0 0 1280 720">
<g class="travCirc">
<circle class="Australia" stroke="black" r="10.5" style="fill: red; opacity: 0;"></circle>
<circle class="Brunei Darussalam" stroke="black" r="10.5" style="fill: green; opacity: 0;" ></circle>
<circle class="Cambodia" stroke="black" r="10.5" style="fill: blue; opacity: 0;"></circle>
</g>
</svg>
<script src="index2.js"></script>
</body>
</html>我正在運行一個生成值的查詢，并根據該值獲取關聯資料，如下所示。
//this value gets generated dynamically based on previous calculations
const yr = 1998;
//pick up the associated data that has the same yr
const filt = src.filter(d => d.Year == yr).sort((x, y) => x.Name.localeCompare(y.Name))
現在，基于filt我如何才能選擇關聯circles，例如， '.travCirc>circle.Australia,.Brunei'以便我可以動態傳遞屬性的資料驅動函式
例如，
顯示代碼片段
const src = [{
"Name": "Australia",
"Year": 1997,
"Value": 15.540540540540499
},
{
"Name": "Australia",
"Year": 1998,
"Value": 15.540540540540499
},
{
"Name": "Australia",
"Year": 1999,
"Value": 22.4489795918367
},
{
"Name": "Brunei",
"Year": 1998,
"Value": 6.4516129032258096
},
{
"Name": "Brunei",
"Year": 2017,
"Value": 9.0909090909090899
},
{
"Name": "Brunei",
"Year": 2018,
"Value": 9.0909090909090899
},
{
"Name": "Cambodia",
"Year": 1997,
"Value": 5.8333333333333304
},
{
"Name": "Cambodia",
"Year": 2017,
"Value": 5.8333333333333304
},
{
"Name": "Cambodia",
"Year": 2021,
"Value": 8.1967213114754092
}
];
//this value gets generated dynamically based on previous calculations
const yr = 1998;
//pick up the associated data that has the same yr
const filt = src.filter(d => d.Year == yr).sort((x, y) => x.Name.localeCompare(y.Name))
document.querySelectorAll('.travCirc>circle.Australia,.Brunei')
.forEach
((a,i)=>{
a.setAttribute('cx',yr/100);
a.setAttribute('cy',filt[i].Value*20)
a.style.setProperty('opacity','1');});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="container" class="svg-container"></div>
<svg viewBox="0 0 1280 720">
<g class="travCirc">
<circle class="Australia" stroke="black" r="10.5" style="fill: red; opacity: 0;"></circle>
<circle class="Brunei Darussalam" stroke="black" r="10.5" style="fill: green; opacity: 0;" ></circle>
<circle class="Cambodia" stroke="black" r="10.5" style="fill: blue; opacity: 0;"></circle>
</g>
</svg>
<script src="index2.js"></script>
</body>我目前正在硬編碼為document.querySelectorAll('.travCirc>circle.Australia,.Brunei')，但是如何將每個filt.Name值作為class過濾器傳遞給.travCirc>circle
//this value gets generated dynamically based on previous calculations
const yr = 1998;
//pick up the associated data that has the same yr
const filt = src.filter(d => d.Year == yr).sort((x, y) => x.Name.localeCompare(y.Name))
document.querySelectorAll('.travCirc>circle.Australia,.Brunei')
.forEach
((a,i)=>{
a.setAttribute('cx',yr/100);
a.setAttribute('cy',filt[i].Value*20)
a.style.setProperty('opacity','1');});
uj5u.com熱心網友回復：
您可以使用map和的組合join將每個陣列元素的名稱添加到querySelectorAll
const src = [{
"Name": "Australia",
"Year": 1997,
"Value": 15.540540540540499
},
{
"Name": "Australia",
"Year": 1998,
"Value": 15.540540540540499
},
{
"Name": "Australia",
"Year": 1999,
"Value": 22.4489795918367
},
{
"Name": "Brunei",
"Year": 1998,
"Value": 6.4516129032258096
},
{
"Name": "Brunei",
"Year": 2017,
"Value": 9.0909090909090899
},
{
"Name": "Brunei",
"Year": 2018,
"Value": 9.0909090909090899
},
{
"Name": "Cambodia",
"Year": 1997,
"Value": 5.8333333333333304
},
{
"Name": "Cambodia",
"Year": 2017,
"Value": 5.8333333333333304
},
{
"Name": "Cambodia",
"Year": 2021,
"Value": 8.1967213114754092
}
];
//this value gets generated dynamically based on previous calculations
const yr = 1998;
//pick up the associated data that has the same yr
const filt = src.filter(d => d.Year == yr).sort((x, y) => x.Name.localeCompare(y.Name))
document.querySelectorAll('.travCirc>circle'
filt.map((a) => '.' a.Name).join(','))
.forEach
((a,i)=>{
a.setAttribute('cx',yr/100);
a.setAttribute('cy',filt[i].Value*20)
a.style.setProperty('opacity','1');});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="container" class="svg-container"></div>
<svg viewBox="0 0 1280 720">
<g class="travCirc">
<circle class="Australia" stroke="black" r="10.5" style="fill: red; opacity: 0;"></circle>
<circle class="Brunei Darussalam" stroke="black" r="10.5" style="fill: green; opacity: 0;" ></circle>
<circle class="Cambodia" stroke="black" r="10.5" style="fill: blue; opacity: 0;"></circle>
</g>
</svg>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/482072.html
標籤：javascript html svg