Question

我想在右键单击数据节点时实现一个列表。为了做到这一点，我遇到了d3.js的d3-context-menu插件。我面临的问题是div元素被添加到body标签之外。

我以前从未见过这样的问题。我按照这里给出的插件示例： http://plnkr.co/edit/hAx36JQhb0RsvVn7TomS?p=preview

这是图书馆文档的链接： https://github.com/patorjk/d3-context-menu

我不知道为什么它会以这种方式表现。我的代码结构如下所示：

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

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

正在点击＆＃34;点＆＃34;活动的一部分。为什么div元素会被附加到体外？

Answer 1

这似乎是设计上的。如果您查看该插件的source code，您会看到：

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

由于在根上调用了selectAll，因此div将附加到<html>，而不会附加到<body>。

因此，作者要么故意这样做，要么忘记d3.selectAll与selection.selectAll不同。

这是一个基本演示，点击“运行代码段”，打开浏览器的开发工具并检查代码段窗口。

d3.selectAll("foo")
  .data([1])
  .enter()
  .append("div")
  .attr("class", "test")

<script src="https://d3js.org/d3.v3.min.js"></script>

你会看到这个：

<html>
    <head>...</head>
    <body>...</body>
    <div class="test"></div>
</html>

div元素被附加在体外

1 个答案: