meteor d3.js не отображает contextmenu

Question

У меня есть d3.js силовой график с contextmenu (и многие другие элементы), которые я хотел бы передать проекту в метеорит. Contextmenu - это draw by 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'); 
} 

Когда я переместил код метеор скопировать код для клиента/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: Failed to execute 'appendChild' on 'Node': Only one element on document allowed.

Так вопросы:

1. Что я должен изменить в своем коде, чтобы заставить его работать с метеоритом? (У меня есть только проблема с контекстным меню, все остальные элементы и действие из d3 отлично работают, я должен добавить что-то еще к моему шаблону ...)
2. В исходном коде я использую контекстное меню для добавления/удаления данных, которые я позже визуализировал , Является ли этот подход разумным или я должен его модифицировать и использовать некоторую функцию метеорита для взаимодействия с пользователем?
3. Я совершенно не знаком с метеоритом, поэтому любые комментарии/предложения приветствуются.

Edit: основе (отсутствие) ответов, которые я предполагаю, что это невозможно или очень сложно, так что я думаю, возможное временное решение: а) использовать d3, чтобы определить, где/что пользователь нажимает на (например, d3.selectAll («круг»). on («click», createAndDisplayMenuUsingMeteor (d, i, mouseClickX, mouseClickY))) b) использовать метеорит для создания и отображения правильного меню в нужном месте. Основываясь на d3.event.pageX, я знаю, куда класть меню, используя данные из монго (и тип узла из d3). Я знаю, что должно быть в меню.

A) часть очевидна и уже выполнена в коде, представленном выше. Теперь проблема заключается в том, как отображать меню (контекст или по-клик-меню, не имеет значения) в метеор. Есть идеи?

Answer 1

Я отвечу на мой вопрос. Мое решение:

1. в d3 я вызвать функцию метеор:

   d3.selectAll ("Многоугольник") на ("клик", функция (d, я) { Meteor.MyApp.nodeMenu. (d, i, d3.event.x, d3.event.y); });

2. в функции у меня есть:

   nodeMenu: функция (д, я, х, у) { вар элем = document.getElementById ("modNode"); elem.style.position = "absolute"; elem.style.display = "block"; // показать меню в нужном месте elem.style.left = x + "px"; elem.style.top = y + "px"; // найти узел в mongo var theNode = Nodes.findOne ({name: d.имя }); },

3. В html-файле я определил шаблон, с которым по умолчанию невидим. После щелчка с меню стало видимым с соответствующими данными (взято из mongo).