Question

我想在d3中创建一个简单的下拉菜单。我知道网上有很多例子，但我找不到一个产生下拉菜单ON CLICK的例子，而不是永久地在屏幕上显示菜单。我有一个简单的散点图，当我点击其中一个点时，我想要一个下拉菜单出现。目前我的代码工作地点在＆＃34; mouseover＆＃34;出现工具提示。对于同一个功能，我想添加点击下拉菜单。这是目前为止的相关代码（不包括下拉菜单）：

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

您需要添加一个on 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");
});

d3.js点击下拉菜单

1 个答案: