How to Draw a Moving Horizontal Line in D3js
In the last tutorial, we learned about Scalable Vector Graphics. As we say, SVG is a markup language based on XML that is able to create mathematical based vectors to create beautiful graphics with no loss of quality no matter the size of the image. As we learned as well, you can can use a program like Adobe Illustrator to create graphics, and then simply save them in an SVG format to use in your web pages. Now let's take a look at how we can use the D3 JavaScript Library when Drawing Scalable Vector Graphics.
Using D3 To Draw Basic Shapes
First off, we'll set up a snippet of HTML that we can use to grab hold of with D3, to append and manipulate. Just like when using a database or file in programming, we need a handle to "grab on" to the resource so to speak. We'll do that same thing here. A div element will be what we append our graphics to. Here is our starting point.
<div class="someclass"> <h2>Drawing SVG Shapes With D3</h2> <div id="svghandle"></div> </div> Now we can use some scripting to recreate our SVG area.
d3.select('#svghandle') .append('svg') .attr('width', 720) .attr('height', 500) .style('background', '#d9edf7'); Drawing SVG Shapes With D3
Pretty straight forward syntax here. We grab hold of the DOM element with the id of svghandle, append an SVG element to it, set some attributes, and style it.
Let's see if we can recreate the rectangle we drew in the prior tutorial using nothing but D3.
d3.select('#svghandle') .append('svg') .attr('width', 720) .attr('height', 500) .style('background', '#d9edf7') .append('rect') .attr('x', 100) .attr('y', 50) .attr('width', 520) .attr('height', 400) .style('fill', '#31708f'); Drawing a Rectangle with D3 JS
Yes Indeed! Working just like we expected 🙂
One thing to note about the D3 scripting style. Since JavaScript ignores whitespace, we can indent each line in a way that makes it easier to understand and reason about. It makes no difference if you were to chain every single command together in one big string. In fact, that is what happens when JavaScript files get minimized for performance reasons.
Moving on with drawing scalable vector graphics, let's now try to script a circle like we did before as well.
d3.select('#svghandle') .append('svg') .attr('width', 720) .attr('height', 500) .style('background', '#d9edf7') .append('circle') .attr('cx', 360) .attr('cy', 250) .attr('r', 220) .style('fill', '#bce8f1'); Drawing a Circle with D3 JS
Ok! We're getting the hang of this, let's draw a triangle now.
d3.select('#svghandle') .append('svg') .attr('width', 720) .attr('height', 500) .style('background', '#dff0d8') .append('polyline') .attr('points', '110 450, 360 50, 610 450') .style('fill', '#3c763d'); Drawing A Triangle with D3 JS
That worked perfect, and just like all the others, we can also create SVG text with D3.
d3.select('#svghandle') .append('svg') .attr('width', 720) .attr('height', 500) .style('background', '#fcf8e3') .append('text') .attr('x', 75) .attr('y', 350) .style({'fill':'#8a6d3b','font-size':'300'}) .text('SVG'); Drawing Text With SVG
Chaining Commands Together With D3 JS
Let's now try something just slightly more advanced. Look at this script, and the result, then see if you can piece together how it all works.
d3.select('#svghandle') .append('svg') .attr('width', 720) .attr('height', 500) .style('background', '#dff0d8') .append('polygon') .attr('points', '110 450, 360 50, 610 450') .style({'fill' : '#3c763d', 'stroke' : '#d6e9c6', 'stroke-width' : '25px'}) d3.select('svg') .append('circle') .attr('cx', 360) .attr('cy', 320) .attr('r', 90) .style({'fill' : '#d9edf7', 'stroke' : '#bce8f1', 'stroke-width' : '25px'}) d3.select('svg') .append('rect') .attr('x', 340) .attr('y', 300) .attr('width', 40) .attr('height', 40) .style({'fill' : '#fcf8e3', 'stroke' : '#8a6d3b', 'stroke-width' : '15px'}); Drawing SVG Shapes With D3
Drawing An Ellipse With D3 JS
So far we have created some basic shapes such as a rectangle, circle, and triangle drawing scalable vector graphics with D3 JavaScript. Let's now try to draw an ellipse, which is very similar to a circle, and just about as easy to create. Consider this snippet of D3.
d3.select('#svghandle') .append('svg') .attr('width', 720) .attr('height', 500) .style('background', '#bce8f1') .append('ellipse') .attr('cx', 360) .attr('cy', 220) .attr('rx', 100) .attr('ry', 200) .style({'fill' : '#d9edf7', 'stroke' : '#31708f', 'stroke-width' : '25px'}); Drawing a Vertical Ellipse With D3 JS
Cool! Just like a circle we have a radius with the ellipse. In fact instead of having just one radius, we actually have two in the ellipse. The first radius in the ellipse is rx and refers to the radius on the horizontal plane of the ellipse. The ry radius of the ellipse is referring to the vertical plane. If these two values are perfectly equal, then you have a perfect circle. So all circles can be an ellipse, but not all ellipses can be a circle 🙂
Let's try rotating that ellipse on it's side. This is easy to do by just swapping the rx and ry values.
d3.select('#svghandle') .append('svg') .attr('width', 720) .attr('height', 500) .style('background', '#bce8f1') .append('ellipse') .attr('cx', 360) .attr('cy', 220) .attr('rx', 200) .attr('ry', 100) .style({'fill' : '#d9edf7', 'stroke' : '#31708f', 'stroke-width' : '25px'}) Drawing a Horizontal Ellipse With D3
Making Use of Stroke and Stroke Width
In some of these more recent shapes, you can see that we are adding a cool looking border to the shape. We do this by setting the stroke and stroke-width in the styling. You assign a color to stroke, and then choose how wide you would like that stroke to be using stroke-width. If you are familiar with the Adobe software Photoshop or Illustrator, this makes perfect sense to you.
Polylines vs Polygons
Another thing worth mentioning when drawing scalable vector graphics is the difference between a Polyline and a Polygon. We had used the polyline to draw a triangle early on in this D3 Tutorial series. This is fine, but we can also use a Polygon for this application. In fact, Polygon is probably the more technically correct element to use for shapes that are self contained. So how do we differentiate this with a Polyline? Well, when you think of a polyline, think of it like a set of steps and you are looking at them from the side. The steps are one big line, which has many points. Let's see an example of this concept.
d3.select('#svghandle') .append('svg') .attr('width', 720) .attr('height', 500) .style('background', '#bce8f1') .append('polyline') .attr('points', '100 0, 100 100, 200 100, 200 200, 300 200, 300 300, 400 300, 400 400, 500 400, 500 500, 600 500') .style({'stroke' : '#31708f', 'stroke-width' : '12px'}); Polyline Steps With D3
Drawing an Octagon using <polygon>
d3.select('#svghandle') .append('svg') .attr('width', 720) .attr('height', 500) .style('background', '#fcf8e3') .append('polygon') .attr('points', '150, 105 500, 105 525, 130 525, 380 500, 405 150, 405 125, 380 125, 130') .style({'stroke' : '#8a6d3b', 'stroke-width' : '25px', 'fill' : '#faebcc'}); Copying SVG drawings using xlink:href
<h2>Copying SVG drawings using xlink:href</h2> <div id="svghandle"> <svg width="720" height="500" style="background: #bce8f1"> <g id="original"> <ellipse rx="100" ry="200" cx="180" cy="240" style="fill: #d9edf7; stroke: #31708f; stroke-width: 25px;"/> </g> <use xlink:href="#original" x="360" y="0"/> </svg> </div> Copying SVG drawings using xlink:href
Drawing Scalable Vector Graphics With D3 JavaScript Summary
This tutorial had us moving beyond drawing scalable vector graphics by hand in raw HTML and SVG Markup. We now see how to use the D3 JavaScript library to programmatically reach into the DOM and create various primitive shapes with Scalable Vector Graphics. By building on the basic shapes like Circles, Rectangles, Ellipses, Triangles, Polygons, and more, you'll start building some really slick visuals for your web pages. The only limit is your own imagination and creativity.
How to Draw a Moving Horizontal Line in D3js
Source: https://vegibit.com/drawing-scalable-vector-graphics-with-d3-javascript/
0 Response to "How to Draw a Moving Horizontal Line in D3js"
Post a Comment