使用选定的svg id作为参数

Question

我的HTML：

<svg id="x"></svg>
<svg id="y"></svg>
<svg id="z"></svg>

我的JS：

const svg = d3.selectAll("svg");
console.log(svg.attr("id"));

日志中的输出：

x

我在期待：

x
y
z

我想在我的脚本中做一些事情，具体取决于svg的id。像：

svg.attr("id") == 'y' ? 0 : 1

是否可以获取所选的svg元素的id并将其用作JS中的参数？

Answer 1

您可以迭代d3选择并比较它的属性，如下所示。

＆＃13;

＆＃13;

d3.selectAll("svg").each(function() {
  var svg = d3.select(this);
  var id = svg.attr("id");
  var value = id == 'y' ? 0 : 1;
  console.log(" ID : "+id+", Value: "+value);
})

＆＃13;

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg id="x"></svg>
<svg id="y"></svg>
<svg id="z"></svg>

＆＃13;

＆＃13;

＆＃13;