title: How to refer to a D3 parent element's class?
body: <p>This question is on d3, v5.</p>
  
  <p>I'm trying to attach the class of the parent element to the child as I create the child element.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var data = [
    [0,10,20],
    [10,20,30],
    [45,55,65]
  ];
  
  var svg = d3.select("svg");
  var rowHeight = 15;
  
  // dummy domain
  var xScale = d3.scaleLinear().range([0,100]).domain([0,100]);
  
  var rows = svg.selectAll("g")
    .data(data)
    .enter()
      .append("g")
      .attr("transform", (d,i)=&gt;`translate(0,${rowHeight*i})`)
      .attr("class", (d,i)=&gt;"r"+i)
    ;
  
  rows.selectAll("g")
    .data((d)=&gt;d)
    .enter()
      .append("g")
      .attr("transform", (d,i)=&gt;`translate(${xScale(d)})`)
      .attr("class", (d,i)=&gt;"c"+i) // how to get class = r* here?
      // tried d3.select(this.parentNode).attr("class") but doesn't work
    ;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"&gt;&lt;/script&gt;
  &lt;svg width=500 height=100&gt;&lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/awnMA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/awnMA.png" alt="Resulting HTML"></a></p>
  
  <p>I tried <code>d3.select(this.parentNode).attr("class")</code> but that's throwing an error.</p>
  
  <p>The basic idea is to get the row and column classes into each of the "g" elements, so further selections will be easier.</p>
  
  <p>Thank you!</p>