Question

在这里和D3网站上有一些问题，关于你如何找到FROM的中心点（或任何一点），但我似乎无法找到如何找到使用path执行此操作。

我在这里完成了simple jsfiddle。基本上我需要在一条线上添加一个形状（使用jsfiddle中的文字使其更清晰）（为简单起见，请说中间）

所以我有一个svg：

line

并添加一条线（位置是固定的，不是来自数据）

var canvas = d3.select('body').append('svg').attr('width', 500).attr('height', 500);

我在演示文稿的顶部和底部添加了一些文本

var line = canvas.append('line').attr('x1', 50).attr('y1', 50).attr('x2', 250).attr('y2', 150);

canvas.append('text').attr('x', line.attr('x1')).attr('y', line.attr('y1')).text('top'); canvas.append('text').attr('x', line.attr('x2')).attr('y', line.attr('y2')).text('bottom');有获取中心点和宽度/ BBox等的方法，但path似乎没有。

任何人都有任何想法如何实现这一目标？

我的第一个问题是获得x1 / x2值之间的差异，如下所示：

line

但正如你从jsfiddle看到的那样，它不知何故。

有人想指出我的错误吗？

Answer 1

我想，这会奏效：

var lineData = {x1: 50, y1: 50, x2: 250, y2: 150};
var canvas = d3.select('body').append('svg').attr('width', 500).attr('height', 500);
var line = canvas.append('line').attr('x1', lineData.x1).attr('y1', lineData.y1).attr('x2', lineData.x2).attr('y2', lineData.y2);
console.log(line);

var x = lineData.x1 + Math.abs(lineData.x2 - lineData.x1) / 2;
var y = lineData.y1 + Math.abs(lineData.y2 - lineData.y1) / 2;
console.log([x,y]);

canvas.append('text').attr('x', x).attr('y', y).text('X');

Answer 2

订单

使用简单的数学，距离公式。

var canvas = d3.select('body').append('svg').attr('width', 500).attr('height', 500); var line = canvas.append('line').attr('x1', 50).attr('y1', 50).attr('x2', 250).attr('y2', 150); var x1 = parseInt(line.attr("x1")); var y1 = parseInt(line.attr("y1")); var x2 = parseInt(line.attr("x2")); var y2 = parseInt(line.attr("y2")); var midPoint = { x: (x1+x2)/2, y: (y1+y2)/2 }; canvas.append('text').attr('x', midPoint.x).attr('y', midPoint.y).text('X');

line{ stroke:#444; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

<强>路径

var canvas = d3.select('body').append('svg').attr('width', 500).attr('height', 500); var line = canvas.append('path').attr('d', "M 50 50 L 250 150"); var path = line.node(); var midPoint = path.getPointAtLength(path.getTotalLength()/2); canvas.append('text').attr('x', midPoint.x).attr('y', midPoint.y).text('X');

path{ stroke: red; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

Answer 3

解决了这个问题，所以我想在没有其他人发现这个问题的情况下回答它。

使用了getBBox()节点（使用.node()）。用于获取width，height和xy：

var canvas = d3.select('body').append('svg')
  .attr('width', 500)
  .attr('height', 500);

var line = canvas.append('line')
  .attr('x1', 50)
  .attr('y1', 150)
  .attr('x2', 50)
  .attr('y2', 250);

然后中间的x和y是：

var midX = line.node().getBBox().x + line.node().getBBox().width / 2;
var midY = line.node().getBBox().y + line.node().getBBox().height / 2;

D3中心点（不是路径）

3 个答案: