Skip to content

Instantly share code, notes, and snippets.

@jungleyang68

jungleyang68/.shape

Last active June 24, 2020 08:25
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save jungleyang68/ad924d7a06606778c855505d56fd85ed to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save jungleyang68/ad924d7a06606778c855505d56fd85ed to your computer and use it in GitHub Desktop.
Download ZIP
circle
Raw
.shape
licence:gpl-3.0
Raw
README.md

This is the demo of drawing shapes using d3js.

Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<!-- load the d3.js library -->
<script src="https://d3js.org/d3.v3.min.js"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>-->
<script>
var holder = d3.select("body") // select the 'body' element
.append("svg") // append an SVG element to the body
.attr("width", 449) // make the SVG element 449 pixels wide
.attr("height", 249); // make the SVG element 249 pixels high
// draw a circle
holder.append("circle") // attach a circle
.attr("cx", 200) // position the x-center
.attr("cy", 100) // position the y-center
.attr("r", 50) // set the radius
//.style("fill","red") //fill with color
.style("fill","none") //fill with color
//.style("fill","rgb(255,0,0)"); //fill with color
//.style("fill","rgb(255,0,0)") //fill with color
//.style("fill-opacity",0.5) //set the opacity of whole element
//.style("opacity",0.5) //set the opacity of whole element
.style("stroke","blue") //set the stroke
.style("stroke-opacity",0.5) //set the opacity of whole element
.style("stroke-width", 5) // set the stroke width
.style("stroke-dasharray", ("10,3")); // make the stroke dashed
//creates a line with a dash of 10 pixels followed by a space of 3 pixels;
holder.append("ellipse") // attach an ellipse
.attr("cx", 200) // position the x-centre
.attr("cy", 100) // position the y-centre
.attr("rx", 100) // set the x radius
.attr("ry", 50) // set the y radius
.style("fill","none") //fill with color
//.style("fill","rgb(255,0,0)"); //fill with color
//.style("fill","rgb(255,0,0)") //fill with color
//.style("fill-opacity",0.5) //set the opacity of whole element
//.style("opacity",0.5) //set the opacity of whole element
.style("stroke","grey") //set the stroke
.style("stroke-opacity",0.5) //set the opacity of whole element
.style("stroke-width", 5) // set the stroke width
.style("stroke-dasharray", ("10,3")); // make the stroke dashed
//creates a line with a dash of 10 pixels followed by a space of 3 pixels;
// draw a rect
holder.append("rect") // attach a rectangle
.attr("x", 100) // position the left of the rectangle
.attr("y", 50) // position the top of the rectangle
.attr("height", 100) // set the height
.attr("width", 200) // set the width
.attr("rx", 10) // set the x corner curve radius
.attr("ry", 10) // set the y corner curve radius
//.style("fill","red") //fill with color
.style("fill","none") //fill with color
//.style("fill","rgb(255,0,0)"); //fill with color
//.style("fill","rgb(255,0,0)") //fill with color
//.style("fill-opacity",0.5) //set the opacity of whole element
//.style("opacity",0.5) //set the opacity of whole element
.style("stroke","pink") //set the stroke
.style("stroke-opacity",0.9) //set the opacity of whole element
.style("stroke-width", 5) // set the stroke width
.style("stroke-dasharray", ("10,3")); // make the stroke dashed
//creates a line with a dash of 10 pixels followed by a space of 3 pixels;
// draw a rect
holder.append("line") // attach a line
.attr("x1", 100) // x position of the first end of the line
.attr("y1", 50) // y position of the first end of the line
.attr("x2", 300) // x position of the second end of the line
.attr("y2", 150) // y position of the second end of the line
.style("stroke", "black") // colour the line
.style("stroke-opacity",0.8) //set the opacity of whole element
.style("stroke-width", 5) // set the stroke width
//.style("stroke-dasharray", ("10,3")) // make the stroke dashed
.style("stroke-linecap", "butt") // stroke-linecap type
//.style("stroke-linecap", "round") // stroke-linecap type
//.style("stroke-linecap", "square") // stroke-linecap type
// draw a polyline
holder.append("polyline") // attach a polyline
.attr("points", "100,50, 200,150, 300,50") // x,y points
.style("fill", "none") // remove any fill colour
.style("fill-opacity",0.5) //set the opacity of whole element
.style("stroke", "black") // colour the line
.style("stroke-opacity",0.8) //set the opacity of whole element
.style("stroke-width", 20) // set the stroke width
//.style("stroke-dasharray", ("10,3")) // make the stroke dashed
.style("stroke-linecap", "butt") // stroke-linecap type
//.style("stroke-linecap", "round") // stroke-linecap type
//.style("stroke-linecap", "square") // stroke-linecap type
.style("stroke-linejoin", "round"); // shape the line join
// draw a polygon
holder.append("polygon") // attach a polygon
.attr("points", "100,50, 200,150, 300,50") // x,y points
.style("fill", "pink") // remove any fill colour
.style("fill-opacity",0.2) //set the opacity of whole element
.style("stroke", "black") // colour the line
.style("stroke-opacity",0.8) //set the opacity of whole element
.style("stroke-width", 1) // set the stroke width
.style("stroke-dasharray", ("10,3")); // make the stroke dashed
//.style("stroke-linecap", "butt"); // stroke-linecap type
//.style("stroke-linecap", "round") // stroke-linecap type
//.style("stroke-linecap", "square") // stroke-linecap type
// draw a path
holder.append("path") // attach a path
.attr("d", "M 100,50, L 200,150, L 300,50 Z") // path commands
.style("fill", "blue") // remove any fill colour
.style("fill-opacity",1) //set the opacity of whole element
.style("stroke", "blue") // colour the line
.style("stroke-opacity",0.8) //set the opacity of whole element
.style("stroke-width", 10) // set the stroke width
.style("stroke-dasharray", ("10,3")); // make the stroke dashed
// draw the clipPath
holder.append("clipPath") // define a clip path
.attr("id", "ellipse-clip") // give the clipPath an ID
.append("ellipse") // shape it as an ellipse
.attr("cx", 175) // position the x-centre
.attr("cy", 100) // position the y-centre
.attr("rx", 100) // set the x radius
.attr("ry", 50); // set the y radius
// draw clipped path on the screen
holder.append("rect") // attach a rectangle
.attr("x", 125) // position the left of the rectangle
.attr("y", 75) // position the top of the rectangle
.attr("clip-path", "url(#ellipse-clip)") // clip the rectangle
.style("fill", "lightgrey") // fill the clipped path with grey
.attr("height", 100) // set the height
.attr("width", 200); // set the width
// draw a text
holder.append("text") // append text
.style("fill", "red") // make the text black
.style("writing-mode", "tb") // set the writing mode //from top to button
.attr("x", 200) // set x position of left side of text
.attr("y", 100) // set y position of bottom of text
.text("Hello World"); // define the text to display
holder.append("text") // append text
.style("fill", "black") // make the text black
.style("writing-mode", "tb") // set the writing mode
.style("glyph-orientation-vertical", 0)
.attr("x", 200) // set x position of left side of text
.attr("y", 25) // set y position of bottom of text
.text("Hello World"); // define the text to display
//combine svg and circle together
// d3.select("body") // select the 'body' element
// .append("svg") // append an SVG element to the body
// .attr("width", 449) // make the SVG element 449 pixels wide
// .attr("height", 249) // make the SVG element 249 pixels high
// .append("circle") // attach a circle
// .attr("cx", 200) // position the x-center
// .attr("cy", 100) // position the y-center
// .attr("r", 50); // set the radius
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment