Last active
December 7, 2019 19:28
-
-
Save curran/3c9fe2992201a514e802 to your computer and use it in GitHub Desktop.
D3 & Font-Awesome
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
| </head> | |
| <body> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var icons = ["twitter-square", "facebook-square", "linkedin-square", "youtube-square", "github-square", "google-plus-square"]; | |
| function iconClicked(icon){ | |
| console.log(icon + " clicked"); | |
| } | |
| var defaultStyle = { | |
| padding: "0px 5px 0px 5px", | |
| margin: "5px", | |
| "border-radius": "16px", | |
| "background-color": "white", | |
| "stroke": "none", | |
| "cursor": "pointer" | |
| }; | |
| var hoveredStyle = { "background-color": "lightgray" }; | |
| var clickedStyle = { "background-color": "gray" }; | |
| d3.select("body").selectAll("i").data(icons) | |
| .enter().append("i") | |
| .attr("class", function(d){ | |
| return "icon fa fa-5x fa-" + d; | |
| }) | |
| .style(defaultStyle) | |
| .on("mouseover", function(){ | |
| d3.select(this).style(hoveredStyle); | |
| }) | |
| .on("mouseout", function(){ | |
| d3.select(this).style(defaultStyle); | |
| }) | |
| .on("mousedown", function(d){ | |
| d3.select(this).style(clickedStyle); | |
| iconClicked(d); | |
| }) | |
| .on("mouseup", function(){ | |
| d3.select(this).style(hoveredStyle); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi. I tried using this method to add icons to a d3.js graph, but the element is not a compatible with SVG. Had to use the \uf version in a Text element