使用d3js绘制平行测量符号线
萨加尔·古赫
我试图绘制一条平行线到a，polyline以便它们看起来像这样：
我具有绘制折线所需的所有点，但使用这些点绘制单条线并对其进行平移会使线在两个轴上稍微移位，并且这些线也相互连接。我希望它们完全如上图所示。
我正在使用此代码：
points = [[83.5,144],[172.5,71],[281.5,133],[385.5,77],[437.5,152]];
for (let i = 0; i < points.length; i++) {
if (i <= this.points.length - 2) {
g.append('line')
.attr('class', "notationLine")
.attr("x1", points[i][0])
.attr("y1", points[i][1])
.attr("x2", points[i+1][0])
.attr("y2", points[i+1][1])
.attr("marker-end", "url(#arrow)")
.attr("marker-start", "url(#arrowStart)")
.attr('stroke', '#53DBF3')
.attr('stroke-width', 1)
.attr("transform", "translate(-10, -20)");
}
}
杰拉尔多·富塔多
您所需要做的只是一点三角函数。
例如，给定您设置的距离...
const distance = 15;
...计算两个点之间的夹角，Math.atan2并将其正弦或余弦乘以所需的距离，正弦表示x位置，余弦表示y位置：
distance * Math.sin(Math.atan(y, x))//for x
distance * Math.cos(Math.atan(y, x))//for y
这是带有数据点的演示：
const points = [
[83.5, 144],
[172.5, 71],
[281.5, 133],
[385.5, 77],
[437.5, 152]
];
const distance = 15;
const svg = d3.select("svg");
const polyline = svg.append("polyline")
.attr("points", points.join(" "));
const lines = svg.selectAll(null)
.data(d3.pairs(points))
.enter()
.append("line")
.attr("x1", d => d[0][0] - (distance * Math.sin(Math.atan2(d[0][1] - d[1][1], d[0][0] - d[1][0]))))
.attr("x2", d => d[1][0] - (distance * Math.sin(Math.atan2(d[0][1] - d[1][1], d[0][0] - d[1][0]))))
.attr("y1", d => d[0][1] + (distance * Math.cos(Math.atan2(d[0][1] - d[1][1], d[0][0] - d[1][0]))))
.attr("y2", d => d[1][1] + (distance * Math.cos(Math.atan2(d[0][1] - d[1][1], d[0][0] - d[1][0]))))polyline {
fill: none;
stroke: blue;
stroke-width: 2px;
}
line {
stroke: red;
stroke-width: 2px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="500" height="200"></svg>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
如何开始使用d3js在y轴和它之间的空间绘制一条线
- 2
在d3js中的两个y轴之间绘制一条线
- 3
使用Python绘制3D轴上的平行标签
- 4
使用次要和主要刻度线d3js创建波特图
- 5
d3js向线中添加箭头
- 6
在d3js的线元素上添加边框
- 7
d3js不会使用数据数组绘制圆
- 8
使用d3js根据用户选择调用备用图表绘制功能
- 9
如何使用D3js在不同时间绘制圆圈？
- 10
d3js绘制svg矩形和线条问题
- 11
D3js手动绘制圆缩放
- 12
通过d3js绘制圆并转换坐标
- 13
D3js随着时间的推移绘制？
- 14
在D3 JS中使用对角线函数在两点之间绘制曲线
- 15
使用d3js排序
- 16
使用d3js排序
- 17
使用 AutoLisp 绘制连接 2 条平行线末端的线
- 18
并非使用平行坐标（d3）绘制所有坐标
- 19
d3js / AngularJS-在angular指令中使用d3js
- 20
条形图的条形图之间的d3js网格线
- 21
如何使用 highcharts/d3.js 或任何其他图表库绘制线加条形图？
- 22
如何在D3js上更改符号类型的颜色？
- 23
d3js折线图错误-绘制怪异区域
- 24
D3JS从数组数据绘制折线图（数据未定义错误）
- 25
将JSON数据绘制到d3js图的轴上
- 26
通过遍历已绘制的对象来更新d3js对象集？
- 27
d3js简单的甜甜圈图未绘制路径
- 28
如何使用d3js实现联合绘图
- 29
使用D3js遍历一组图像
我来说两句