D3 одна группа для каждого ввода данных

Question

я хочу, чтобы положить свои узлы в группах, т.е.

<g> 
    <circle></circle> 
</g> 
<g> 
    <circle></circle> 
</g> 

Вот часть моего кода, который устанавливает группы, но не рисует круг в группа.

 nodeEnv = nodeGroup.selectAll(".nodeEnv") 
      .data(graph.nodes); 

     nodeEnv.exit().remove(); 

     nodeEnvEnter = nodeEnv 
      .enter().append("g") 
      .attr("class", "nodeEnv"); 

     nodeEnv = nodeEnvEnter 
      .merge(nodeEnv); 

     // Update the nodes 
     node = nodeEnv 
      .selectAll("circle") 
      .data(function(d){return d;}); 

     // Exit any old nodes 
     node.exit().remove(); 

     // Enter any new nodes 
     nodeEnter = node.enter().append("circle") 
        .attr("r", 5) 
        .attr("id", function(d){ return d.id;}) 
        .call(d3.drag() 
         .on("start", dragstarted) 
         .on("drag", dragged) 
         .on("end", dragended)) 
        .on("click", clicked); 

     node = nodeEnter.merge(node); 

Основной проблемой является линия, где я привязки данных к node с .data(function(d){return d;});. Я нашел это в документации d3.js.

Вот JSFiddle: https://jsfiddle.net/FFoDWindow/64sofrbp/

Любые предложения? Спасибо заранее, FFoDWindow

Answer 1

Решение 1:

node = nodeEnv 
      .selectAll("circle") 
      .data(function(d){return d;}); 

d здесь является объектом, а не массив, так что ничто не может сравниться. Ответ просто вставить его в своем собственном массиве:

node = nodeEnv 
      .selectAll("circle") 
      .data(function(d){return [d];}); 

---

Решение 2:

Однако то, что я думаю, что вы после этого, это просто добавить один круг в каждой группе? Что может быть сделано, как это, не делая отдельных входа/выхода/слияния для окружностей

nodeEnv = nodeGroup.selectAll(".nodeEnv") 
    .data(graph.nodes); 

    nodeEnv.exit().remove(); 

    nodeEnvEnter = nodeEnv 
    .enter().append("g") 
    .attr("class", "nodeEnv"); 

    // Update the nodes 
    nodeEnvEnter.append("circle") 
    .attr("r", 5) 
    .attr("id", function(d) { 
     return d.id; 
    }) 
    .call(d3.drag() 
     .on("start", dragstarted) 
     .on("drag", dragged) 
     .on("end", dragended)) 
    .on("click", clicked); 

    nodeEnv = nodeEnvEnter 
    .merge(nodeEnv); 

Далее вниз в функции ticked, вам необходимо изменить node к nodeEnv.select("circle")

https://jsfiddle.net/64sofrbp/1/