d3.js drop down menu on click
<p>I want to create a simple drop down menu in d3. I know there are many examples online but I could not find an example that produces a drop down menu ON CLICK instead of having a menu permanently on screen. 
I have a simple scatter plot and when I click on one of the dots, I want a drop down menu to appear. At the moment I have working code where on "mouseover" a tooltip appears. To the same function I want to add the on click drop down menu. 
Here is the relevant code so far (excl drop down menu):</p>

<pre><code>var g = svg.selectAll(".dot")
  .data(data)
  .enter()
  .append("circle")
  .attr("class", "dot")
  .attr("r", 3.5)
  .attr("cx", xMap)
  .attr("cy", yMap)
  .style("fill", function(d, i) { return color(cValue(d));}) 
  .on("mouseover", function(d, i) {
      tooltip.transition()
           .duration(200)
           .style("opacity", .9);
      tooltip.html(d.TITLE)
           .style("left", (d3.event.pageX + 5) + "px")
           .style("top", (d3.event.pageY - 28) + "px");

    })
</code></pre>

<p>Now I want to add the drop down menu on click. I have managed to get a drop down menu on screen permanently by adding:</p>

<pre><code>&lt;select id = "opts"&gt;
&lt;option value="ds1"&gt;data1&lt;/option&gt;
&lt;option value="ds2"&gt;data2&lt;/option&gt; 
&lt;option value="ds3"&gt;data3&lt;/option&gt;
 &lt;!-- and so on... --&gt;   
 &lt;/select&gt;     
</code></pre>

<p>But I only want the menu to appear when I click on a point on the graph.
I am very new to d3 so any feedback is appreciated! thanks </p>