Question

我想有一个我的力导向图的版本，它使用方块而不是每个节点的圆圈。我用来做的代码很好，但不是在正方形上居中，而是用左上角绘制每个正方形，圆的中心位于圆形节点中。这意味着我的文字标签不再居中。如何调整矩形对象的x和y位置以占据圆圈所具有的相同空间？

我正在用于圆形和方形节点的代码如下。

function nearest(value, min, max, steps) {
  var zerone = Math.round((value - min) * steps / (max - min)) / steps; // bring to 0-1 range
  return zerone * (max - min) + min;
}

  force
      .nodes(json.nodes)
      .links(json.links)
      .start();

  var link = svg.selectAll(".link")
      .data(json.links)
    .enter().append("line")
      .attr("class", "link")
      .attr('stroke', function(d) {return d.color; })
      .attr('stroke-width', 1)      
      .on("mouseover", function(d) {
        d3.select(this).attr('stroke-width', 2);      
      })
      .on("mouseout", function(d) {
        d3.select(this).attr('stroke-width',1);
      });

  var node = svg.selectAll(".node")
      .data(json.nodes)
      .enter().append("g")
      .attr("class", "node")
      .call(force.drag);

node.append("circle")
     .attr("r", function (d) nearest((Math.log(d.weight) *10), 10, 50, 5) || 10;})
    .style('fill', function(d) { return d.color; })
    .on("mouseover", function(d) {
          link.style('stroke-width', function(l) {
          if (d === l.target || d === l.source)
          return 2;
        })
          link.style('stroke', function(l) {
            if (d === l.target || d === l.source)
              return 'aqua'; 
            })
        .duration(150);      
      })
    .on("mouseout", function(d) {
        link.style('stroke-width', 1)
        link.style('stroke', function(d) {return d.color; })
        .duration(150);
      });

node.append("rect")
    .attr("width", function (d) {return nearest(((Math.log(d.weight) *10)), 10, 50, 5) * 2 || 10;})
    .attr("height", function (d) {return nearest(((Math.log(d.weight) *10)), 10, 50, 5) * 2 || 10;})
    .style('fill', function(d) { return d.color; })
    .on("mouseover", function(d) {
          link.style('stroke-width', function(l) {
          if (d === l.target || d === l.source)
          return 2;
        })
          link.style('stroke', function(l) {
            if (d === l.target || d === l.source)
              return 'aqua'; 
            })
        .duration(150);      
      })
    .on("mouseout", function(d) {
        link.style('stroke-width', 1)
        link.style('stroke', function(d) {return d.color; })
        .duration(150);
      });

Answer 1

您可以对平方应用平移，将它们向左和向上移动一半宽度。

在你的情况下：

node.append("rect")
   .attr("width", function (d) {return nearest(((Math.log(d.weight) *10)), 10, 50, 5) * 2 || 10;})
   .attr("transform", function(d) {
      var currWidth = nearest(((Math.log(d.weight) *10)), 10, 50, 5) * 2 || 10;
      return "translate(" + (-currWidth/2) + ", " + (-currWidth/2) + ")";
   });
;

在力导向图中调整节点位置

1 个答案: