d3.js выпадающее меню при нажатии

Question

Я хочу создать простое выпадающее меню в d3. Я знаю, что в Интернете есть много примеров, но я не мог найти пример, который выдает раскрывающееся меню ON CLICK вместо постоянного меню на экране. У меня есть простой график рассеяния, и когда я нажимаю на одну из точек, я хочу, чтобы появилось выпадающее меню. На данный момент у меня есть рабочий код, где на «mouseover» появляется всплывающая подсказка. К той же функции я хочу добавить раскрывающееся меню на клик. Вот соответствующий код до сих пор (за исключением выпадающее меню):

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"); 

    }) 

Теперь я хочу, чтобы добавить выпадающее меню щелчком мыши. Мне удалось получить выпадающее меню на экране постоянно, добавив:

<select id = "opts"> 
<option value="ds1">data1</option> 
<option value="ds2">data2</option> 
<option value="ds3">data3</option> 
<!-- and so on... --> 
</select>  

Но я только хочу, чтобы меню появится при нажатии на точку на графике. Я очень новичок в d3, поэтому любая обратная связь приветствуется! спасибо

Answer 1

Вам нужно добавить событие click, которое выбирает ваше раскрывающееся меню и перемещает его точно так же, как всплывающая подсказка. Ваш CSS должен выглядеть следующим образом

#opts{ 
    display: none; 
    position: absolute; 
} 

Затем добавьте на функцию клик ваших точек SVG

.on("click", function(d){ 
    d3.select("#opts") 
     .style("display", "block") 
     .style("left", (d3.event.pageX + 5) + "px") 
     .style("top", (d3.event.pageY - 28) + "px"); 
});