Question

我有d3.js强制驱动的图形与contextmenu（和许多其他元素），我想将项目转移到流星。 Contextmenu由nodeMenu函数绘制，如下所示。

d3.selectAll("circle").on("contextmenu", function(d,i) {nodeMenu(d, i)} ); 

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

  d3.event.preventDefault();
  d3.selectAll('.context-menu')
    .html('<center> context menu </center>')
    .append('ul')
    .selectAll('li')
    .data([1,2,3,4]).enter()
    .append('li')
    .text(function(d) { return d });

    d3.select('.context-menu').style('display', 'block') 
      .style('left', (d3.event.pageX - 2) + 'px') 
      .style('top', (d3.event.pageY - 2) + 'px') 
      .style('display', 'block');
}

当我将代码移动到meteor时，我将代码复制到client / main.js：

Template.d3app.rendered = function () { 
  oryginal_d3_code_with_few_tiny_changes }

我的模板非常简单。在main.html中我有：

<template name="d3app">
  <p> app</p>
  <div id="app"></div> 
</template>

不幸的是，它不起作用。我收到了以下错误：

d3.js？hash = aca575a ...：824 Uncaught HierarchyRequestError：无法在'Node'上执行'appendChild'：文档上只允许一个元素。

所以问题是：

我的代码应该更改以使其与meteor一起使用？（我只有上下文菜单的问题所有其他元素和d3的动作工作正常，我想我应该在模板中添加更多内容......）
在原始代码中，我使用contextmenu添加/删除我后来可视化的数据。这种方法是否合理，或者我应该修改它并使用一些流星功能与用户交互？
我是流星的新手，所以任何评论/建议都受到热烈欢迎。

编辑：基于（缺乏）答案，我认为这是不可能的或非常复杂的，所以我猜可能的解决方法是： a）使用d3确定用户点击的位置/用户（例如d3.selectAll（“circle”）。on（“click”，createAndDisplayMenuUsingMeteor（d，i，mouseClickX，mouseClickY））） b）使用meteor在适当的位置生成并显示适当的菜单。基于d3.event.pageX我知道放置菜单的位置，使用来自mongo的数据（以及来自d3的节点类型）我知道菜单中应该是什么。

a）部分很明显，已在上面的代码中完成。我现在的问题是如何在流星中显示菜单（上下文或点击菜单，无所谓）。有什么想法吗？

Answer 1

我会回答我的问题。我的解决方案是：

在d3中我称之为流星功能：

d3.selectAll（“polygon”）。on（“click”，function（d，i）{ Meteor.MyApp.nodeMenu（d，i，d3.event.x，d3.event.y）; }）;
在我的函数中：

nodeMenu：function（d，i，x，y）{ var elem = document.getElementById（“modNode”）; elem.style.position = “绝对”; elem.style.display =“block”; //在适当的地方显示菜单 elem.style.left = X + “像素”; elem.style.top = Y + “PX”; //在mongo中找到节点 var theNode = Nodes.findOne（{name：d.name}）; }，
在html文件中，我定义了默认情况下不可见的模板。点击菜单后，使用适当的数据（取自mongo）可见。

meteor d3.js无法显示上下文菜单

1 个答案: