title: Selecting a specific svg object using d3
body: <p>I have a polygon on a SVG object made by d3. When clicked on, a 'bootstrap popover' with two buttons opens up. I want to be able to click on the links and transform the polygon (the ultimate goal is to draw a circle on top of the polygon). For now, the main problem is that I cannot select the polygon and change its attributes.
  Here is my code:</p>
  
  <pre><code>  // create an svg element and append it
    canvas = d3.select("#map")
      .append("svg")
        .attr("width", 500)
        .attr("height", 500)
        .attr("id", "firstFloor");
  
    // draw polygon
    var coverageAreaIDA1 = 'roomA1';
    var content = '&lt;button id="view" class="btn btn-sm btn-primary view-cam-btn"&gt;View Camera&lt;/button&gt; &lt;button id="set" class="btn btn-sm btn-primary set-dest-btn"&gt;Set Destination&lt;/button&gt; &lt;input type="hidden" name="coverage-area-id" value="'+coverageAreaIDA1+'"&gt;';
    var polygonA1 = [[65, 215], [65, 250], [140, 250], [140, 215]];
    var roomA1 = canvas.append("polygon")
      .attr("points", polygonA1)
      .attr("class", "coverage-area")
      .attr("id", coverageAreaIDA1)
      .attr("data-toggle", "popover")
      .attr('data-placement', 'top')
      .attr("data-content", content)
      .attr("tabindex", "0")
      .attr("data-trigger", "focus");
  </code></pre>
  
  <p>I have tried many methods, the closest I've got so far is selecting the button on the popover with its value (which is the same as the polygons id), putting it in a var, and using d3 to select the polygon, like the code below.</p>
  
  <pre><code>function badGuy() {
    $(document).on('click', '.view-cam-btn', function(){
      var coverageAreaID = $(this).nextAll('input').eq(0).val();
      var selection = canvas.select("#" + coverageAreaID).styles("fill", "purple");
      console.log('Selected polygon has ID '+selection.attrs('id'));
      });
  }
  </code></pre>
  
  <p>I know that 'selection' is not empty or null because when I test its truthiness it returns true, but the above console.log returns <strong>"Selected polygon has ID [object Object]"</strong> and does NOT change polygon's style.</p>
  
  <p>PS: if you're wondering why I'm using attrs instead of attr and styles instead of style, by looking at many questions/answers on StackOverflow, I figured I should add this library</p>
  
  <pre><code>&lt;script src="https://d3js.org/d3-selection-multi.v0.4.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>and use attrs and styles. Before that, console.log was not returning anything.</p>
  
  <p>Edit: Full code:
  <a href="https://codepen.io/navidfalla/pen/xrpzXE" rel="nofollow noreferrer">https://codepen.io/navidfalla/pen/xrpzXE</a></p>