D3.js, position elements horizontally -


I'm a D3.js newbie, so I apologize if I ask something basic

my There is a simple array in the form of a close dataset:

  [0, 10, 15, 20, 24, 35, 58]    p> For each element of the array, I want to make a circle and horizontally starting those circles at the same distance (12 pixels) x = 10 (and y is continuously being 50). How can i do  

Thanks in advance.

The basics that you need to know about d3.js , It adds data to SVG elements and makes the scene.

To get the basics of D3 You can google around

These are some of the sites I like to learn D3.

- Absolutely government website with all the codes and examples.


- Free for the original and you can also get a payment extension for further D3 tutorials.


- You receive a free PDF with all the lines by line briefing in PDF


The answer to this question is given here.

This is very simple in creating circles in D3.

Here is the code I used. Duplicate ('circle') .append ('svg') .attr ('height', 500) .attr ('width', 500)

First I add svg element from .circle div.

 svg.selectAll ('circle') .Data (data). Center () .append .attr ("cx", function (d, i) {return 60 * i}) .attr ("cy", 60) .attr ("r", 20)  

and then I add a circle based on the number of data using the above blocks of code.

Note: .attr is that I'm adding attribute.

Here I have set the radius to 20 .

But you can change the radius according to the data. function (D) {return D; } .

And of course you . Using the style ("Fill", "#ddd") and , you can color the circle using other CSS stuff. Style () .

You can find more information about the websites I have provided.

Hope this will be helpful.

Comments

Popular posts from this blog

Pass DB Connection parameters to a Kettle a.k.a PDI table Input step dynamically from Excel -

multithreading - PhantomJS-Node in a for Loop -

c++ - MATLAB .m file to .mex file using Matlab Compiler -