javascript - Set position of polygons and paths in d3 -



javascript - Set position of polygons and paths in d3 -

i have several external svg files want read in , position. of svg files polygons, others paths. of them, specific random amount translate files when read them in. want assign position couple of shapes. (jsfiddle).

class="lang-js prettyprint-override">var width = 300, height = 300; var samplesvg = d3.select("body") .append("svg") .attr( {width: width, height: height} ); var shapes = [ {url:"https://dl.dropboxusercontent.com/u/2467665/shapes/shapes-01.svg", number: 1, color: 'red'}, {url:"https://dl.dropboxusercontent.com/u/2467665/shapes/shapes-02.svg", number: 2, color: 'yellow'}, {url:"https://dl.dropboxusercontent.com/u/2467665/shapes/shapes-03.svg", number: 3, color: 'orange'}, {url:"https://dl.dropboxusercontent.com/u/2467665/shapes/shapes-04.svg", number: 4, color: 'green'}, {url:"https://dl.dropboxusercontent.com/u/2467665/shapes/shapes-05.svg", number: 5, color: 'blue'}, {url:"https://dl.dropboxusercontent.com/u/2467665/shapes/shapes-06.svg", number: 6, color: 'purple'}, {url:"https://dl.dropboxusercontent.com/u/2467665/shapes/shapes-07.svg", number: 7, color: 'red'}, {url:"https://dl.dropboxusercontent.com/u/2467665/shapes/shapes-08.svg", number: 8, color: 'orange'}]; var q = queue(); shapes.foreach(function(shape) { q.defer(d3.xml, shape.url, "image/svg+xml"); }); q.awaitall(function (error, results) { samplesvg.selectall('g.shape').data(shapes) // g tag created positioning shape @ random location .enter().append('g').attr('class', 'shape') .attr('transform', function () { homecoming 'translate(' + math.random() * (w - 50) + ',' + math.random() * (h - 50) + ')' }) .each(function (d, i) { // loaded svg file appended within g tag this.appendchild(results[i].documentelement); d3.select(this).select('svg').select("*") .attr("stroke", function () {return d.color;}) .attr('transform', function () { if (d.number > 6) { var newx = 200, newy = 200; //this want set position homecoming 'scale(0.3) translate(0,0)'} else {return 'scale(0.1)'} ;}) }) });

basically, want shapes have different random positions except 2 shapes (those d.number > 6) want appear @ (200,200).

is there way either reset translate , run 1 time again new amounts, or set position of both paths , polygons?

still unclear, think you're looking for:

q.awaitall(function (error, results) { samplesvg.selectall('g.shape') .data(shapes) .enter() .append('g') .attr('class', 'shape') .each(function (d, i) { // loaded svg file appended within g tag this.appendchild(results[i].documentelement); d3.select(this).select('svg').select("*") .attr("stroke", d.color); }) .attr('transform', function (d, i) { // in general, in here we're setting transform of <g>, contains svg. so: if (d.number > 6) { var newx = 200, newy = 200; // homecoming here scale , translate <g> (and svg within it) homecoming 'scale(0.3) translate(0,0)'; } else { homecoming 'translate(' + math.random() * (w - 50) + ',' + math.random() * (h - 50) + ') scale(0.1)'; } }); });

javascript svg d3.js

Comments

Post a Comment

Popular posts from this blog

Delphi change the assembly code of a running process -

Delphi change the assembly code of a running process - i'm trying alter address 00741fa5 has push test.009e721c . alter push test.009e71c8 . procedure callback; asm force $9e71c8 end; procedure tform2.btn1click(sender: tobject); var ppid :dword; pprocess : cardinal; begin getwindowthreadprocessid(findwindow(nil,pchar('test')), @ppid); pprocess := openprocess(process_all_access, false, ppid); injectasm(pprocess, $741fa5, 10, integer(@callback), 0); end; here injectasm function (with error checking) function injectasm(process: longword; injectaddress, injectsize, codeaddress, codesize : integer): pointer; var csize, rsize : integer; replaced : array of byte; jmp : array [0..4] of byte; jmpaddress : integer; nopv : byte; : integer; nbr: ulong_ptr; begin //injectsize must equal or greater 5, because need space our //(far) jmp wwxxyyzz instruction //if there's no space, inject in place of few instructions if injectsize ...
Read more

json - Hibernate and Jackson (java.lang.IllegalStateException: Cannot call sendError() after the response has been committed) -

json - Hibernate and Jackson (java.lang.IllegalStateException: Cannot call sendError() after the response has been committed) - hello have problem hibernate , jackson. have 2 pojos @entity @table(name = "users") public class user implements serializable { static final long serialversionuid = 4235637833262722256l; @id @generatedvalue private int id; @column(name = "creation_date") private date creationdate; @column(name = "first_name") private string firstname; @column(name = "last_name") private string lastname; @version @column(name = "version") private int version; @column(name = "e_mail") private string email; @column(name = "enabled") private boolean enabled; @column(name = "login") private string login; @column(name = "password") private string password; @jsonmanagedreference("role") @onetomany(mappedby = "user", cascade = cascadetype.all,fetch = fetchtyp...
Read more

C++ 11 "class" keyword -

C++ 11 "class" keyword - i've started using c++ 11 little bit more , have few questions on special uses of class keyword. know it's used declare class, there's 2 instances have seen don't understand: method<class t>(); and class class_name *var; why precede typename keyword class in first example, , keyword pointer in sec example? that known elaborated type specifier , necessary when class name "shadowed" or "hidden" , need explicit. class t { }; // love of god don't t t; t t2; if compiler smart, give these warnings: main.cpp:15:5: error: must utilize 'class' tag refer type 't' in scope t t2; ^ class main.cpp:14:7: note: class 't' hidden non-type declaration of 't' here t t; ^ if class not defined, deed forwards declaration. for example: template <typename t> void method() { using type = typename t::value_type; } method...
Read more