d3.js - D3 求线的角度

标签 d3.js

我有 x1,y1,x2,y2,如何计算这条线的角度?

我必须使用纯数学吗?或者 d3 中有什么可以帮助我的?

            edgeContainer.append("g")
                .selectAll("path")
                .data(edges)
                .enter()
                .append("path")
                .attr("class", function (d) {
                    return "nodeLine animate nodeLine_" + NodeUtils.createEdgeClass(d) + " node_" + d.outV + " node_" + d.inV;
                })
                .style("fill", "none")
                .style(edgeType == 'circular' ? "marker-start" : "marker-end", "url(#arrow)")
                .style("stroke", function (d) {
                    return options.edgeStroke ? options.edgeStroke : ReferenceData.getByRelationshipType(d.label).stroke;
                })
                .style("stroke-dasharray", function (d) {
                    return options.edgeStrokeDasharray ? (options.edgeStrokeDasharray == 'none' ? false : options.edgeStrokeDasharray) : ReferenceData.getByRelationshipType(d.label)['stroke-dasharray'];
                })
                .attr("d", function (d, i) {
                    var x1 = d.targetNode.node.x;
                    var y1 = d.targetNode.node.y;
                    var x2 = d.sourceNode.node.x;
                    var y2 = d.sourceNode.node.y;
                })

            ;

最佳答案

角度的计算很简单:

 var angle = Math.atan2(y2 - y1, x2 - x1));

如果需要度数,可以通过乘以 180/pi 轻松转换。

The Math.atan2() method returns a numeric value between -π and π representing the angle theta of an (x, y) point. This is the counterclockwise angle, measured in radians, between the positive X axis, and the point (x, y). Note that the arguments to this function pass the y-coordinate first and the x-coordinate second.

enter image description here

文档:developer.mozilla.org - Math.atan2()

关于d3.js - D3 求线的角度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34293488/

相关文章:

javascript - 如何将 D3.js 与带有 Angular 2 的渲染器 API 集成

javascript - 如何将节点从一个模拟移动到另一个模拟

javascript - 使用 d3.js 创建 x 轴上不等间隔的散点图

javascript - d3 缩放变换有问题。错误 : [ts] Property 'translate' does not exist on type 'Event | BaseEvent'

javascript - 带有重要性星星的条形图

javascript - 如何绘制带有圆 Angular 的圆弧?

javascript - 获取可缩放旭日中可见的根节点

javascript - Firefox 为 d3.js svg 库苦苦挣扎?

javascript - d3 缩放到边界框 II 缩放时滚动会引发错误

javascript - d3力导向树上的曲线