I'm having issues stabilizing the patterns in this mock.
how do I ensure the image is always centrally aligned - it seems to jump around depending on its location/scale.
here is the code to this issue. Hoping the solution can be applied to this force chart example.
d3.js Force Chart - image/node linkage and animation
function addUserPatterns(patternsSvg, userData){
$.each(userData, function( index, value ) {
var defs = patternsSvg.append('svg:defs');
defs.append('svg:pattern')
.attr('id', "--"+index+"-"+value.userName.toLowerCase())
.attr('patternUnits', 'userSpaceOnUse')
.attr('width', 100)
.attr('height',100)
.append('svg:image')
.attr('xlink:href', value.userImage)
.attr('x', 0)
.attr('y', 0)
.attr('width', 100)
.attr('height', 100);
});
var circle = patternsSvg.append("svg:g")
.selectAll("circle")
.data(userData);
//enter
circle
.enter()
.append("svg:circle")
.attr("r", 50)
.style("fill", function(d, i) {
var imgUrl = "--"+i+"-"+d.userName.toLowerCase();
return "url(#"+imgUrl+")";
})
.attr("cy", function(d){
return random(0, 143);
})
.attr("cx", function(d){
return random(0, 143);
})
function random(min, max){
return Math.floor(Math.random() * (max - min + 1)) + min;
}
}
var patternsSvg = d3.select("body")
.append('svg')
.attr('class', 'patterns')
.attr('width', 300)
.attr('height', 300)
.append('g')
.attr("transform","translate(100, 100)")
var userData =[
{
"userName": "Ria",
"userImage" : "https://pbs.twimg.com/profile_images/427892889092231168/4c4Qwynr.png"
},
{
"userName": "Barry",
"userImage" : "https://lh3.googleusercontent.com/-XdASQvEzIzE/AAAAAAAAAAI/AAAAAAAAAls/5vbx7yVLDnc/photo.jpg"
}
]
addUserPatterns(patternsSvg, userData);
I have the images being appended to the circles ok now - but if the images are of different sizes/dimensions - is there a way to ensure the image will be fitted properly?
Is it just an assumption to ensure the images are of the same dimensions as of each other - or is there a more sophisticated way to calculate image width/height and then alter the pattern attributes as required?
var defs = patternsSvg.append('svg:defs');
defs.append('svg:pattern')
.attr('id', "--"+index+"-"+value.userName.toLowerCase())
//.attr('patternUnits', 'userSpaceOnUse')
.attr('x', 0)
.attr('y', 0)
.attr('width', 50)
.attr('height', 50)
.append('svg:image')
.attr('xlink:href', value.userImage)
.attr('x', 0)
.attr('y', 0)
.attr('width', 100)
.attr('height', 100);
});
