CODEWITHSUNDEEP
javascriptd3.js
malwin
malwin

Reputation: 674

D3 one group for each data-entry

i want to put my nodes in groups, i.e.

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

Here is a part of my code, which sets up the groups, but doesn't draw any circle into the group. 

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

The major problem is the line where i bind data to node with .data(function(d){return d;});. I found this in the d3.js documentation.

Here is a JSFiddle:https://jsfiddle.net/FFoDWindow/64sofrbp/

Any suggestions? Thanks in advance, FFoDWindow

Upvotes: 0

Views: 204

Answers (1)

mgraham
mgraham

Reputation: 6207

Solution 1:

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

d here is an object, not an array, so nothing is matched. The answer is just to stick it in its own array:

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

Solution 2:

However, what I think you're after is just to append one circle to each group? Which can be done like this without doing separate enter/exit/merge's for the circles

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

Further down in the ticked function, you'll need to change node to nodeEnv.select("circle")

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

Upvotes: 1

Related Questions