Javascript select（）方法中的函数

在这个项目中，我正在制作一个交互式元素周期表，它基于一个csv文件。我创建了一个g组，并为每个化学元素提供了一个id。例如：

<g id="element1" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://en.wikipedia.org/wiki/Hydrogen"><rect x="0" y="0" rx="4" ry="4" id="Nonmetal" class="xpos bordered" width="51" height="61" style="fill: rgb(255, 215, 0);"></rect></g>

您希望文本与您的rect一起出现在g中。此外，还应定位g，然后相对于g定位元素。大概是这样的：

var g = cards.enter()
  .append('g')
  .attr("id",function(d) {return "element"+(d.AtomicNumber)})
  .attr("transform", function(d){
    var x = (d.DisplayColumn - 1) * (gridSize + espacecases),
        y = (d.DisplayRow - 1) * (gridSize + 10 + espacecases);
    return "translate(" + x + "," + y + ")";
  });

g.append("rect")
  .attr("width", gridSize) 
  .attr("height", gridSize+10);

g.append("text")
 .text(function(d){
   return (d.AtomicNumber);
 });

---

另一种方法是将代码块包装在cards.eachfunction d{…}中，然后使用d3.selectbody.selectelement+d.AtomicNumber或类似的方法。

var g = cards.enter()
  .append('g')
  .attr("id",function(d) {return "element"+(d.AtomicNumber)})
  .attr("transform", function(d){
    var x = (d.DisplayColumn - 1) * (gridSize + espacecases),
        y = (d.DisplayRow - 1) * (gridSize + 10 + espacecases);
    return "translate(" + x + "," + y + ")";
  });

g.append("rect")
  .attr("width", gridSize) 
  .attr("height", gridSize+10);

g.append("text")
 .text(function(d){
   return (d.AtomicNumber);
 });