D3曲线反转

时间:2015-09-09 14:12:47

标签: javascript d3.js svg

如何使这些线条反向?

我看到这篇文章: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;
    });

0 个答案:

没有答案