Javascript div元素被附加到主体外部

我想在右键单击数据节点时实现一个列表。为此，我偶然发现了d3.js的d3上下文菜单插件。我面临的问题是div元素出现在body标记之外

我以前从未见过这样的问题。 我遵循此处给出的插件示例：

这是指向库文档的链接：

我不知道它为什么这样做。我的代码结构如下所示：

eventGroup = focusClip.selectAll(".event").data(data);

// Enter phase ---
eventGroupEnter = eventGroup.enter().append("svg");
eventGroupEnter.append("rect");
eventGroupEnter.append("circle");
eventGroupEnter.append("text");

// Event Group
eventGroup
  .attr("class", "event")
  .attr("x", function(d) {
    return parseInt(x(d.time)) - 10;
  }) // offset for the bg and center of dot
  .attr("y", function(d) {
    return parseInt(y(d.plotY));
  })
  .attr("width", function(d) {
    return parseInt((d.label.length / 2)) + 60 + "em";
  })
  .attr("height", "20");

// Background
eventGroup.select("rect")
  .attr("x", 0) // removes the "<rect> attribute x: Expected length, 'NaN'" Error
  .attr("y", 4)
  .attr("width", "100%")
  .attr("height", "12")
  .attr("fill", "url(#event-bg)");

menu = [{
  title: "Item #1"
}];
// Dot
eventGroup.select("circle")
  .attr("class", "dot")
  .attr("r", 4)
  .attr("cx", 10)
  .attr("cy", 10)
  .attr("fill", function(d) {
    return d.evtColor ? d.evtColor : "#229ae5";
  })
  .attr("stroke", function(d) {
    return d.evtColor ? d.evtColor : "#229ae5";
  })
  .attr("stroke-width", 2)
  .on("contextmenu", d3.contextMenu(menu, function() {
    console.log("Quick! Before the menu appears!");
  }))
  .on("mouseenter", tooltip.mouseover)
  .on("mouseleave", tooltip.mouseout)
  .on("click", annotateBox.click);

为了解释清楚，我添加了图表的图像：

---

在事件的点部分调用右键单击事件。为什么div元素会附加到主体之外？

这似乎是出于设计。如果您查看该插件的名称，您将看到：

d3.selectAll('.d3-context-menu').data([1])
    .enter()
    .append('div')
    .attr('class', 'd3-context-menu');

由于selectAll是在根上调用的，因此div将附加到，而不是附加到

因此，作者不是故意这么做，就是忘记了d3.selectAll与selection.selectAll是不同的

这是一个基本的演示，单击RunCodeSnippet，打开浏览器的开发工具并检查snippet窗口

d3.选择Allfoo .数据[1] 进来 .appenddiv .课程、考试

---

请分享插件文档的链接。感谢分享插件的链接。我很快看了一眼，但没有发现任何线索。如果这是一个bug，那么在打开Github问题时，您可能会得到一个正确的答案。只是确认一下，你使用的是D3V3吗？是的，我使用的是D3V3。我仔细看了一下文档，现在我看到plunker是官方的。正如我在回答中所写，这似乎是出于设计。好吧，那么你是说这是预期的行为？因为即使在这种情况下，我也会在右边看到双滚动条，表明d3上下文菜单是在其余实现的背景下运行的。我不知道这是否是有意的，我想说的是，这是给定源代码的预期结果。您可以打开一个Github问题，向作者询问此问题。好的，谢谢！我已经在github上提出了这个问题。如果我得到任何响应，将在此处更新。@user2128很高兴知道。但是，您可能会遇到不同的问题。正如我在回答中所说，在中添加是该插件的默认行为，正如您在其工作插件中所看到的。但是，您在GitHub问题中描述了一个不同的问题。所以，你的问题可能与div在体外无关。。。你说我觉得这可能是列表没有出现的原因，但事实并非如此，因为他们的plunker正在工作。尽管如此，我建议你接受这个答案或删除这个问题，然后发布另一个与你在GitHub问题上提供的描述相同的问题。