Angular 7 D3| D3 SVG Coordinate Space|D3| D3 Part5

D3 SVG Coordinate Space


Before we start D3 SVG Coordinate Space refer 

D3 SVG Coordinate Space 

Like graph we can define the SVG elements coordinates.Using  D3.js to add SVG elements to specific coordinates in a graph based on data.

Coordinates Data-set

// Data set Created for circle elements radious
let  coordinatesDS= [50, 100, 150,200,250,300,350];
SVG Circle Element Coordinate Space  without using D3  refer W3schools 

Basic Coordinate Attributes are

cx: x-axis coordinate of the center of the circle.
cy: y-axis coordinate of the center of the circle.

without d3, how actually cx and cy works with svg let's  see the below example
// example code
<div id="circleelement" >
<svg height="200" width="200">
<circle cx="50" cy="50" r="25" stroke="yellow" stroke-width="5" />
<circle cx="100" cy="100" r="25" stroke="yellow" stroke-width="5" />
<circle cx="150" cy="150" r="25" stroke="yellow" stroke-width="5" />
</svg>
</div>

D3.js allows us to use a function in the "cx" and "cy" attributes.

// Div element selected from angular's Component
let divcircleelementdatabound = d3.select('#circleelementdatabound');
// svg element added inside the selected div element
let svgforcircleelements = divcircleelementdatabound.append('svg').attr('width', 500).attr('height', 500);
// Data set Created for circle elements radious
let  coordinatesDS= [50, 100, 150,200,250,300,350];
// Coordinate Space using D3 function
// D3.js allows us to use a function in the "cx" and "cy" attributes.
let circleelements = svgforcircleelements.selectAll('circle')
.data(coordinatesDS)
.enter()
.append('circle')
.attr('cx', function (d) { return d; })
.attr('cy', function (d) { return d; })
.attr('r',20 )
.attr('stroke','black')
.attr('stroke-width','2')
.style('fill', function (d) {
if ( d === 50) {
return 'red'
}else if (d=== 100)  { return 'green'}
else if (d=== 150)  { return 'blue'}
else if (d=== 200)  { return 'yellow'}
else if (d=== 250)  { return 'orange'}
else if (d=== 300)  { return 'purple'}
else if (d=== 350)  { return 'white'}
});

Output

Run the project And see  the result

Code Action @StackBlitz

No comments

Post Top Ad

Post Bottom Ad