How do I place an image in a D3 node?
So far I have created these D3 nodes which are used to create a collapsible hierarchical tree. As long as these nodes are colored # AA1C1C (dark red) to show that if you click on them, they will expand by more nodes. I want to use a space in the image in node that will be a plus symbol so that all users know that it is viewable. How should I do it? I tried to use this symbol: http://uxrepo.com/static/icon-sets/ionicons/svg/ios7-plus-outline.svg
D3
nodeUpdate.select("circle")
.attr("r", 6.2)
.style("fill", function(d) { return d._children ? "blue" : "#fff";
});
SVG:
var svg = d3.select("body").append("svg")
.attr("width", width + margin.right + margin.left)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
Am I on the right lines?
source to share
If I understand your question correctly, you tried to create a collapsible tree and you need to add an image to the nodes, so I modify this example and create some codes.
-
For the first step, set up json or data like this:
var data = { "fname": "Rachel", "lname": "Rogers", "title": "CEO", "photo": "http://lorempixel.com/60/60/cats/1", "children": [{ "fname": "Bob", "lname": "Smith", "title": "President", "photo": "http://lorempixel.com/60/60/cats/2", "children": [{ "fname": "Mary", "lname": "Jane", "title": "Vice President", "photo": "http://lorempixel.com/60/60/cats/3", "children": [{ "fname": "Bill", "lname": "August", "title": "Dock Worker", "photo": "http://lorempixel.com/60/60/cats/4" }, { "fname": "Reginald", "lname": "Yoyo", "title": "Line Assembly", "photo": "http://lorempixel.com/60/60/cats/5" }] }, { "fname": "Nathan", "lname": "Ringwald", "title": "Comptroller", "photo": "http://lorempixel.com/60/60/cats/6" }] }] }
- Change your code.
--- Update ---
The usual way to display a clickable Object in JavaScript is with the CSS
. As you can see in my jsfiddle code I used .node { cursor: pointer;}
to show that this node is clickable. you can change your code like this:
nodeUpdate.select("circle")
.attr("r", 6.2)
.style("filter", function(d) {
return d._children ? "url(#image)" : "#fff";
}).on("mouseover",function(d){
d3.select(this).style("cursor","pointer");
});
Complete the jsfiddle here .
This link can help you.
--- Update ---
I am changing my code to read data from a file json
. This is the updated code.
source to share
You need to add a template if you are going to use a fill.
var box = d3.select('svg')
.append('svg:circle')
.attr('cx', 60)
.attr('cy', 60)
.attr('r', 10)
.style('fill', 'url(#image)')
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg width="700" height="660">
<defs id="mdef">
<pattern id="image" x="0" y="0" height="40" width="40">
<image x="0" y="0" width="20" height="20" xlink:href="http://uxrepo.com/static/icon-sets/ionicons/svg/ios7-plus-outline.svg"></image>
</pattern>
</defs>
</svg>
You can also do this with filters
d3.select('svg')
.append('svg:circle')
.attr('cx', 60)
.attr('cy', 60)
.attr('r', 20)
.style('filter', 'url(#image)')
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg width="700" height="660">
<filter id="image" x="0%" y="0%" width="100%" height="100%">
<feImage xlink:href="http://uxrepo.com/static/icon-sets/ionicons/svg/ios7-plus-outline.svg" />
</filter>
</svg>
Note that you just need .style ('fill', 'url (#image)') or .style ('filter', 'url (#image)') and the svg markup from above. The rest of the javascript is just for adding a circle of samples.
Once you've added it to the svg, you can reuse it multiple times.
source to share