title: Select d3.js data element by attribute
body: <p>I have a grid represented using d3.js and svg.
  What I want to do is change the colour of a tile and all adjacent tiles when the  tile is clicked.
  I am wondering the best way to select the tiles adjacent to the one clicked.
  My code so far: </p>
  
  <pre><code>var w = 960,
      h = 500,
      z = 20,
      x = w / z,
      y = h / z;
  
  var svg = d3.select("body").append("svg")
      .attr("width", w)
      .attr("height", h);
  
  svg.selectAll("rect")
      .data(d3.range(x * y))
    .enter().append("rect")
      .attr("transform", translate)
      .attr("position", pos)
      .attr("width", z)
      .attr("height", z)
      .attr("clicked", false)
      //.on("mouseover", mouseover)
      .on("click", click)
      .style("stroke", "rgb(6,120,155)")
      .style("stroke-width", 2);
      .style("fill", "rgb(255, 255, 255)")
  
  
  function translate(d) {
    return "translate(" + (d % x) * z + "," + Math.floor(d / x) * z + ")";
  }
  
  function pos(d) {
    return [ (d % x) * z , Math.floor(d / x) * z ];
  }
  
  function click(d) {
    var currentColor = this.style.fill;
    var clickedYet = d3.select(this).attr("clicked");
    currentColor = currentColor == "rgb(255, 255, 255)" ? "rgb(255, 0, 255)" : "rgb(255, 255, 255)";
  
  
    d3.select(this)
      .attr("clicked", true)
      .transition()
        .style("fill", currentColor);
  
  }
  </code></pre>
  
  <p>What I was wondering, is whether is is possible to select tiles/ "rect" by the attribute position? Or if I should consider a completely different approach?</p>