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/

每个数据输入D3一组

1 个答案: