javascript - Closing path for transition animation d3.js -


i've made line path creating shape of bottle. i'm trying figure out if can close path in order transition it. ideally have bottle animate across canvas, same way circle or rectangle would. possible? i'm still learning 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);

a svg path has no x attribute. simplest solution, therefore, applying transition group:

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

here demo:

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>


Comments

Post a Comment

Popular posts from this blog

javascript - Confirm a form & display message if form is valid with JQuery -

i'm developing django application , use javascript in order improve website. i have form , display 2 things : confirm form before submit if form submitted, display message : 'form saved' it's first time i'm using js , need make process. this code : <form class = "form" method='post' action=''> {% csrf_token %} <br></br> {{ form.as_p}} <br></br> <button type="submit">valider</button> </form> <script> $('#form').submit(function() { var c = confirm("click ok continue?"); return c; //you can return c because true or false }); </script> and if form valid , saved : <script type="text/javascript" > $(document).on('valider', 'form.form', function(form) { var $form = $(form); $.ajax({ ...
Read more

Retrieving ETA (estimated time of arrival) with Google Distance Matrix API and public transit as transport mode -

Image
is possible retrieve eta google's distancematrix api (or alternative api). fyi, eta different duration, when using public transport. following example clarify request. when leave on friday @ 8.15 i'll able catch train @ 8.30 , arrive @ 9.00 am. google says duration 30 minutes. however, when leave on saturday @ 8.15 i'll able catch first train @ 9.00 , arrive @ 9.30 am. google still says duration 30 minutes, means ignore delay. google map supports functionality there api around giving me eta instead of duration. can see, distance-matrix' response no good. clarifying question little. eta estimated time of arrival , it's clear user wants know entire duration of transport (including waiting time public transport).
Read more

ionic framework - Meteor - Error: Failed to execute 'insertBefore' on 'Node' -

i trying make dynamic list display using meteor, idea load more elements each time bottom of page reached. the html template following : <template name="contacts"> {{#contentfor "headertitle"}} <div class="bar bar-header bar-assertive"> <h1 class="title">contacts :</h1> </div> {{/contentfor}} {{#ionview}} {{#ioncontent}} <div class="list"> {{#each contacts}} <a class="item item-avatar" href="/contacts/{{_id}}"> <img src="/img/ico_client.png"> <h2>{{full_name}}</h2> <p>{{company}}</p> </a> {{/each}} </div> {{#if moreresults}} <div id="showmoreresults" style="margin-left: 25px;"> <span class="loading">loading...</span> </div> {{/if}} {{/ioncontent}} {{/ionview}} </te...
Read more