Question

我已经将力导向布局的示例更改为DIV而不是SVG，但垂直拖动似乎是反向的，我不知道为什么。（可能是limoncello）：）

http://codepen.io/michaelbell/pen/rxMVmx/

强制代码没有什么奇怪之处：</ p>

＆＃13;

var force = d3.layout.force()
  .nodes(nodes)
  .size([width, height])
  .gravity(0)
  .charge(0)
  .on("tick", tick)
  .start();

function tick(e) {
  $div
    .each(cluster(10 * e.alpha * e.alpha))
    .each(collide(.5))
    .style('left', function(d) {
      return x(Math.max(d.radius, Math.min(width - d.radius, d.x))) + 'px';
    })
    .style('top', function(d) {
      return y(Math.max(d.radius, Math.min(height - d.radius, d.y))) + 'px';
    });
}

＆＃13;

Answer 1

这是因为SVG has a coordinate system的正值y值从页面顶部开始为零，并且值增加而不是向上。这在d3.scale.linear domain和range y进行了解释，以便将其撤消。

var y =
  d3.scale.linear()
    .domain([0, height])
    .range([height, 0]);

尝试将y比例更改为与x比例相同的方向。例如：

http://codepen.io/anon/pen/NxRqVW

var y =
  d3.scale.linear()
    .domain([0, height])
    .range([0, height]);

D3 Force垂直反向拖动

1 个答案: