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

'hasOwnProperty' in javascript -

i use obj.hasownproperty judge whether object has property, when replaced obj[prop] !== undefined , not normal implementation, ask, why behind method can not use it? object.hasownproperty(prop); object[prop] !== undefined; obj[prop] !== undefined wrong 2 reasons: you can explicitly set property undefined , obj[prop] = undefined; . obj.hasownproperty(prop) return true in case. obj[prop] follow prototype chain, return property that's inherited. obj.hasownproperty(prop) returns true if property exists directly in object, returns false inherited properties.
Read more

How to put a lock and transaction on table using spring 4 or above using jdbcTemplate and annotations like @Transactional? -

i trying put lock on table while writing on table , if happened in between roll-back . trying convert below code lock table test_g1 read; lock table test_g write; -- begin; start transaction; insert test_g1 values(143); insert test_g values(145); select * test_g1; select * test_g; rollback; select * test_g; unlock tables; how convert above code @transactional spring jdbctemplate code? @transactional(rollbackfor={dataaccessexception.class}) public void test(){ jdbctemplate.execute("insert test1 (id, nam) values (4, 'a')"); throw new dataaccessexception("error") { }; } here trying throw error, insert statement should rollback it's not happening . thanks edit-1 attaching code , doing in jdbcdaoimpl.java , mentioned problem comment above test() . app.java package com.cgiri.javabrains.spring4; import org.springframework.beans.factory.annotation.autowired; import org.springframework.context.applic...
Read more

java - How to implement an entity bound odata action in olingo v4.3 -

similar post, i'm trying implement action bound entity how create bounded action in olingo v4 (java) but 500 no error logged when metadata document. in answer above linked question, there no mention of getactionimport() implementation described in olingo tutorial, , wonder if needs modified entity-bound action? how can olingo log error causing 500? getting debug output quite easy: handler.register(new defaultdebugsupport()); where handler odatahttphandler armed this, , after examination of olingo-server-core code, discovered: you don't need actionimport @ bound actions. the action name in url needs qualified namespace, https://issues.oasis-open.org/browse/odata-812 has not been implemented. when built client url using org.apache.olingo.client.api.uri.uribuilder , wrapped entity id in single quotes, , olingo server threw exception, reverted using stringbuilder
Read more