javascript - 过渡动画 d3.js 的关闭路径

Question

我制作了一条用于创建瓶子形状的线条路径。我正在尝试弄清楚是否可以关闭这条路径以进行转换。理想情况下，我想让瓶子在 Canvas 上呈现动画，就像圆形或矩形一样。这可能吗？我还在学习 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>