D3曲线反转答案

【问题标题】：D3 curved lines reversedD3曲线反转
【发布时间】：2015-09-09 14:12:46
【问题描述】：

我怎样才能使这些线条相反？

我看到了这篇文章：Curved line on d3 force directed tree，我找到了一种方法，通过切换开始位置和结束位置，以另一种方式使线条向左拱形。当我想沿路径设置动画时出现问题。

有没有更好的方法可以在不切换开始和结束位置的情况下做到这一点？

var startX, startY, endX, endY;

var line = lineGroup.insert('path')
    .attr('class', 'map__airport__line')
    .attr('id', 'line-' + self.attr('id') + '-' + target.attr('id'))
    .attr('d', function() {
        if (parseInt(target.attr('cx')) > parseInt(self.attr('cx'))) {
            startX = self.attr('cx');
            startY = self.attr('cy');
            endX   = target.attr('cx');
            endY   = target.attr('cy');
        } else {
            startX = target.attr('cx');
            startY = target.attr('cy');
            endX   = self.attr('cx');
            endY   = self.attr('cy');
        }

        var dx   = target.attr('cx') - self.attr('cx'),
            dy   = target.attr('cy') - self.attr('cy'),
            dr   = Math.sqrt(dx * dx + dy * dy),
            path =
                'M' + startX + "," + startY +
                'A' + dr + ',' + dr + ' 0 0,1 ' +
                endX + ',' + endY;

        return path;
    });

【问题讨论】：

切换开始和结束位置是最简单的。您可以应用变换来镜像弧线，但这对我来说似乎更复杂。

标签： javascript d3.js svg

【解决方案1】：

将 0 0,1 改为 0 0 0：

var startX, startY, endX, endY;

var line = lineGroup.insert('path')
.attr('class', 'map__airport__line')
.attr('id', 'line-' + self.attr('id') + '-' + target.attr('id'))
.attr('d', function() {
    if (parseInt(target.attr('cx')) > parseInt(self.attr('cx'))) {
        startX = self.attr('cx');
        startY = self.attr('cy');
        endX   = target.attr('cx');
        endY   = target.attr('cy');
    } else {
        startX = target.attr('cx');
        startY = target.attr('cy');
        endX   = self.attr('cx');
        endY   = self.attr('cy');
    }

    var dx   = target.attr('cx') - self.attr('cx'),
        dy   = target.attr('cy') - self.attr('cy'),
        dr   = Math.sqrt(dx * dx + dy * dy),
        path =
            'M' + startX + "," + startY +
            'A' + dr + ',' + dr + ' 0 0 0 ' +
            endX + ',' + endY;

    return path;
});

在此处查看有关弧形路径的文档： enter link description here

【讨论】：