Javascript 根据另一个查询动态地 select
Javascript to dynamically select based on another query
我正在使用如下的 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，我如何才能select关联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');});
您可以结合使用 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>
我正在使用如下的 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，我如何才能select关联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');});
您可以结合使用 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>