Skip to content

Instantly share code, notes, and snippets.

@jhellier
Last active October 17, 2015 23:21
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save jhellier/26fdb3c8ebd5dcb9a143 to your computer and use it in GitHub Desktop.
Adobe SVG to D3 w/ Mods

Built with blockbuilder.org

This is an example of a graphic created in Adobe Illustrator and imported into a D3 based page. This is a followup of an earlier block "Adobe SVG to D3". The earlier block explains more about the mechanics of bringing in a new SVG element.

This block creates four copies of the original star graphic SVG and shows how to access each one as if it were a D3 based SVG element. The styling colors are changed and the movement of each is distinct as well as capturing mouse events for each SVG.

This graphic although simple is a good example of one that you would not want to have to code the path yourself. Very easy to do in Adobe Illustrator but very painfull to get right if you were trying to code it manually.

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
svg { width: 100%; height: 100%; }
</style>
</head>
<body>
<script>
var margin = {top: 20, right: 10, bottom: 20, left: 10};
var width = 960 - margin.left - margin.right;
var height = 500 - margin.top - margin.bottom;
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var dataset = [ 5, 10, 13, 25];
var w = 400;
var h = 400;
d3.xml("star1.xml", "image/svg+xml", function(xml) {
var importedNode = document.importNode(xml.documentElement, true);
svg.selectAll("g")
.data(dataset)
.enter()
.append("g")
.attr("transform", function(d, i){
return "translate(" + (i * (w / dataset.length)) + ","
+ (h - 80) + ")"
+"scale("+ 0.3 +")";
})
.each(function(d, i){
//Add new star
var star = this.appendChild(importedNode.cloneNode(true));
d3.select(star)
.select(".st0")
.style("fill", function() {
if (i % 2 == 0) {
return "blue";
} else {
return "red";
}
})
.on("click", function() {
console.log("Hello There " + i);
})
})
.transition()
.duration(2000)
.attr("transform", function(d, i){
return "translate(" + (i * (w / dataset.length)) + ","
+ (h - d*4 - (w / dataset.length)) + ")"
+"scale("+ 0.3 +")";
});
});
</script>
</body>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 312 292" style="enable-background:new 0 0 312 292;" xml:space="preserve">
<style type="text/css">
.st0{fill:#F7EC25;}
.st1 {
fill: green;
}
</style>
<polygon class="st0" points="273.2,110.7 216.4,166.5 232.5,244.4 159.1,208.1 88,245.6 99.5,167.4 39.4,112.6 119.8,100.6
153.8,29.3 192.1,100 "/>
<polygon class="st1" points="196.7,174 171.9,163.9 180,189.4 162.1,169.5 158.3,196 150.8,170.4 136,192.5 140.3,166.2 117.3,179.7
132.6,157.9 106,160.1 129.3,147 104.4,137.5 131,135.8 112.7,116.4 137.4,126.5 129.4,101.1 147.3,120.9 151,94.5 158.6,120.1
173.4,97.9 169.1,124.2 192.1,110.7 176.8,132.6 203.4,130.4 180.1,143.4 205,152.9 178.4,154.6 "/>
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment