javascript - D3 一条线的中心点(不是路径)

Question

这里和 D3 网站上有几个关于如何沿着 path 找到中心点(或任何点)的问题，但是我似乎找不到如何做它带有 行。

我做了一个simple jsfiddle这里。本质上，我需要在一条线上的一个点上添加一个形状(使用 jsfiddle 中的文本使其更清晰)(为简单起见，我们说中间)

所以我有一个 svg:

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');

path 有获取中心点和宽度/BBox 等的方法，但 line 似乎没有。

有人知道如何实现吗？

不过，我最初的想法只是获取 x1/x2 值之间的差异，如下所示:

canvas.append('text')
  .attr('x', parseInt(line.attr('x2') - line.attr('x1')))
  .attr('y', parseInt(line.attr('y2') - line.attr('y1')))
  .text('just looks a bit off');

但是正如您将从 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');