过渡动画 d3.js 的闭合路径

Question

我做了一条线路径来创建一个瓶子的形状。我试图弄清楚我是否可以关闭这条路径以过渡它。理想情况下，我希望瓶子在画布上动画化，就像圆形或矩形一样。这可能吗？我还在学习d3。

var width = 900,
    height = 800;
var canvas = d3.select('body')
            .append('svg')
            .attr('width', width)
            .attr('height', height);
var dataArray = [
            {x:51,y:44},
            {x:51,y:49},
            {x:53,y:50},
            {x:53,y:53},
            {x:52,y:53},
            {x:52,y:60},
            {x:70,y:85},
            {x:71,y:160},
            {x:64,y:181},
            {x:54,y:181},
            {x:47,y:170},
            {x:43,y:170},
            {x:36,y:181},
            {x:26,y:181},
            {x:19,y:160},
            {x:19,y:85},
            {x:39,y:60},
            {x:39,y:53},
            {x:38,y:53},
            {x:38,y:50},
            {x:40,y:49},
            {x:40,y:44},    
            {x:51,y:44}
                ];
var interpolate = d3.curveCardinal.tension(0.35);
var line = d3.line()
            .x(function(d,i){ return d.x/1.05 })
            .y(function(d,i){ return d.y })
            .curve(interpolate);

var group = canvas.append('g')
            .attr('transform','translate(0,0)');
var bottle = group.selectAll('path')
            .data([dataArray])
            .enter()
            .append('path')
            .attr('fill','#ED5545')
            .attr('stroke','#AA2731')
            .attr('stroke-width','2')
            .attr('id','bottleImage')
            .attr('d',line);
bottle.transition()
        .attr('x',300);

Answer 1

SVG 路径没有x属性。因此，最简单的解决方案是将转换应用于组：

group.transition()
    .delay(500)
    .duration(2000)
    .attr('transform', 'translate(300,0)');

这是演示：

var width = 400,
  height = 300;
var canvas = d3.select('body')
  .append('svg')
  .attr('width', width)
  .attr('height', height);
var dataArray = [{
  x: 51,
  y: 44
}, {
  x: 51,
  y: 49
}, {
  x: 53,
  y: 50
}, {
  x: 53,
  y: 53
}, {
  x: 52,
  y: 53
}, {
  x: 52,
  y: 60
}, {
  x: 70,
  y: 85
}, {
  x: 71,
  y: 160
}, {
  x: 64,
  y: 181
}, {
  x: 54,
  y: 181
}, {
  x: 47,
  y: 170
}, {
  x: 43,
  y: 170
}, {
  x: 36,
  y: 181
}, {
  x: 26,
  y: 181
}, {
  x: 19,
  y: 160
}, {
  x: 19,
  y: 85
}, {
  x: 39,
  y: 60
}, {
  x: 39,
  y: 53
}, {
  x: 38,
  y: 53
}, {
  x: 38,
  y: 50
}, {
  x: 40,
  y: 49
}, {
  x: 40,
  y: 44
}, {
  x: 51,
  y: 44
}];
var interpolate = d3.curveCardinal.tension(0.35);
var line = d3.line()
  .x(function(d, i) {
    return d.x / 1.05
  })
  .y(function(d, i) {
    return d.y
  })
  .curve(interpolate);
var group = canvas.append('g')
  .attr('transform', 'translate(0,0)');
var bottle = group.selectAll('path')
  .data([dataArray])
  .enter()
  .append('path')
  .attr('fill', '#ED5545')
  .attr('stroke', '#AA2731')
  .attr('stroke-width', '2')
  .attr('id', 'bottleImage')
  .attr('d', line);
group.transition()
  .delay(500)
  .duration(2000)
  .attr('transform', 'translate(300,0)');

<script src="https://d3js.org/d3.v4.min.js"></script>