添加转换以扩展节点不起作用的节点

Question

让我先说一下，我甚至不能100％确定这个应该有效。我完全道歉在这个问题上无知;这是我不熟悉的事情。

我正在使用这样的Force Layout：

var force = d3.layout.force()
  .charge(-1500)
  .linkDistance(250)
  .size([parseInt(svg.style('width')), parseInt(svg.style('height'))]);

稍后我会像这样绑定节点：

var node = svg.selectAll(".node")
  .data(scope.nodes);
var nodeg = node.enter().append("g")
  .attr("class", "node")
  .on('click', function (n) {
    d3.select(this)
      .attr('transform', 'translate(' + n.x + ', ' + n.y + ') scale(1.5)')
  })
  .call(force.drag);

尝试实施的代码是：

.on('click', function (n) {
  d3.select(this)
    .attr('transform', 'translate(' + n.x + ', ' + n.y + ') scale(1.5)')
})

根据我已经完成的一些研究，我认为这会导致节点在点击时缩放或缩放。但是，即使代码执行，也没有任何事情发生。在查看“元素”页面时，我甚至看不到添加的转换。

我想知道这是不是因为Force Layout应用了不断变化的变换？它有效地覆盖了吗？

无论如何， 的目标是让此节点扩展。 它内部有一个image和几个text个对象。它添加如下：

nodeg.append("image")
  .attr("xlink:href", function (d) {
    return d.avatar || 'https://github.com/favicon.ico'
  })
  .attr("x", -56)
  .attr("y", -8)
  .attr("width", 64)
  .attr("height", 64);

nodeg.append("text")
  .attr("dx", 12)
  .attr("dy", ".35em")
  .attr('class', 'name')
  .text(function (d) {
    var name;

    if (d._id === scope.user.profile._id) {
      name = 'You';
    } else if (d.firstName) {
      name = d.firstName;
      if (d.lastName) {
        name += ' ' + d.lastName;
      }
    } else if (d.lastName) {
      name = d.lastName;
    }

    return name;
  });

nodeg.append("text")
  .attr("dx", 12)
  .attr("dy", "1.35em")
  .text(function (d) {
    return d.relationship;
  });

tick功能

      force.on("tick", function () {
        link.attr("x1", function (d) {
          return d.source.x;
        })
          .attr("y1", function (d) {
            return d.source.y;
          })
          .attr("x2", function (d) {
            return d.target.x;
          })
          .attr("y2", function (d) {
            return d.target.y;
          });

        node.attr("transform", function (d) {
          return "translate(" + d.x + "," + d.y + ")";
        });
      });

Answer 1

感谢Lars，再一次，我有一个漂亮的解决方案！我添加了一个新函数来构建适当的transform：

function getNodeTransform(n) {
  var transform = 'translate(' + n.x + ', ' + n.y + ')';
  if (n.fixed === true) {
    console.log('Adding scale to node:', n);
    transform += ' scale(1.4)';
  }
  return transform;
}

下一步是在点击和 tick中使用它：

.on('click', function (n) {
  n.fixed = !n.fixed;

  d3.select(this)
    .transition('bounce')
    .attr('transform', getNodeTransform(n));
})

force.on("tick", function () {
  link.attr("x1", function (d) {
    return d.source.x;
  })
    .attr("y1", function (d) {
      return d.source.y;
    })
    .attr("x2", function (d) {
      return d.target.x;
    })
    .attr("y2", function (d) {
      return d.target.y;
    });

  node.attr("transform", function (d) {
    return getNodeTransform(d);
  });
});

这使我即使在布局结束时也可以选择节点。