|
<html lang="en"> |
|
<head> |
|
<meta charset="utf-8"> |
|
<title>SVG Shapes</title> |
|
<link href="style.css" rel="stylesheet" type="text/css" /> |
|
</head> |
|
|
|
|
|
<body> |
|
<svg id="svg" width="640" height="480" xmlns="http://www.w3.org/2000/svg"> |
|
<!-- Created with SVG-edit - http://svg-edit.googlecode.com/ --> |
|
<g> |
|
<title>Layer 1</title> |
|
<rect id="svg_1" height="49" width="68" y="103" x="110" stroke-width="5" stroke="#000000" fill="#FF0000"/> |
|
<rect id="svg_2" height="70" width="107" y="103" x="214" stroke-width="5" stroke="#000000" fill="#FF0000"/> |
|
<rect id="svg_3" height="53" width="76" y="103" x="371" stroke-width="5" stroke="#000000" fill="#007f7f"/> |
|
<ellipse ry="50" rx="71" id="svg_4" cy="269" cx="88" stroke-width="5" stroke="#000000" fill="#FF0000"/> |
|
<ellipse ry="29" rx="9" id="svg_5" cy="345" cx="201" stroke-width="5" stroke="#000000" fill="#FF0000"/> |
|
<ellipse ry="15" rx="61" id="svg_6" cy="362" cx="280" stroke-width="5" stroke="#000000" fill="#FF0000"/> |
|
<ellipse ry="27" rx="46" id="svg_7" cy="355" cx="445" stroke-width="5" stroke="#000000" fill="#FF0000"/> |
|
<ellipse rx="61" id="svg_8" cy="267" cx="510" stroke-width="5" stroke="#000000" fill="#FF0000"/> |
|
<ellipse ry="57" rx="22" id="svg_9" cy="242" cx="354" stroke-width="5" stroke="#000000" fill="#FF0000"/> |
|
<ellipse ry="38" rx="63" id="svg_10" cy="234" cx="287" stroke-width="5" stroke="#000000" fill="#FF0000"/> |
|
<ellipse ry="7" rx="35" id="svg_11" cy="229" cx="463" stroke-width="5" stroke="#000000" fill="#FF0000"/> |
|
<ellipse ry="10.5" rx="13" id="svg_12" cy="330.5" cx="373" stroke-width="5" stroke="#000000" fill="#FF0000"/> |
|
<ellipse ry="40" rx="51" id="svg_13" cy="278" cx="223" stroke-width="5" stroke="#000000" fill="#00ff7f"/> |
|
<line id="svg_14" y2="157" x2="525" y1="65" x1="388" stroke="#000000" fill="none"/> |
|
<line id="svg_15" y2="181" x2="607" y1="71" x1="537" stroke="#000000" fill="none"/> |
|
<line id="svg_16" y2="338" x2="621" y1="261" x1="602" stroke="#000000" fill="none"/> |
|
<line id="svg_17" y2="278" x2="431" y1="264" x1="534" stroke="#000000" fill="none"/> |
|
<line id="svg_18" y2="294" x2="583" y1="191" x1="511" stroke="#000000" fill="none"/> |
|
<line id="svg_19" y2="407" x2="555" y1="339" x1="575" stroke="#000000" fill="none"/> |
|
<line id="svg_20" y2="430" x2="645" y1="415" x1="594" stroke="#000000" fill="none"/> |
|
<line id="svg_21" y2="434" x2="232" y1="447" x1="453" stroke="#000000" fill="none"/> |
|
<line id="svg_22" y2="437" x2="108" y1="400" x1="143" stroke="#000000" fill="none"/> |
|
<text xml:space="preserve" text-anchor="middle" font-family="serif" font-size="24" id="svg_28" y="31" x="339" stroke-width="0" stroke="#000000" fill="#000000">This is a total mess. Help.</text> |
|
</g> |
|
</svg> |
|
|
|
|
|
|
|
</body> |
|
|
|
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script> |
|
|
|
<script type="text/javascript"> |
|
// Using d3 to select all the ellipses, re-style all the ellipses so their fill is blue. |
|
var ellipse = d3.selectAll("ellipse") |
|
.attr("fill", "blue"); |
|
|
|
// Using d3 to select all the rectangles, re-style them so their stroke width is 2px instead. |
|
// Use d3 to style all the rectangles so they are pink. |
|
var rect = d3.selectAll("rect") |
|
.attr("stroke-width", "2px") |
|
.attr("fill", "pink"); |
|
|
|
//ALTERNATIVE-- |
|
//d3.selectAll("rect").style({"stroke-width": "2px", "fill": "pink"}); |
|
|
|
// Then use d3 to style the first rectangle so it is blue. |
|
var firstrect = d3.select("rect") |
|
.attr("fill", "blue"); |
|
|
|
// Use d3 to select the rectangle with id svg_2 and make the color of the stroke orange. |
|
var svg_2 = d3.select("#svg_2") |
|
.attr("stroke", "orange"); |
|
|
|
// Use d3 category10() color scale to set the color of the lines. |
|
var colors = d3.scale.category10(); |
|
d3.selectAll("line").style("stroke", function(d,i){ |
|
return colors(i); |
|
}); |
|
|
|
// Use d3 to remove the text on top |
|
var text = d3.selectAll("text") |
|
.remove(); |
|
|
|
|
|
|
|
|
|
</script> |
|
|
|
</html> |
