直线的D3中心点（非路径）

Question

这里和D3网站上有一些关于如何找到path中心点（或任何点）的问题，但是我似乎找不到如何用line 。

我在这里做了一个简单的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');

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;