So I've made a React component that will return a D3 SVG element that takes in an image and then displays it with some text wrapped around the image. However, when I use the component with multiple images, it seems that it sets all the images to be the first in the list. Example (the actual picture needed to be displayed is on bottom, while the SVG only shows the first).
What might be going on here? Would it happen to be something to do with how I'm selecting? My render function is as follows:
render() {
return (
<div ref="arc" style={{ minHeight: 225}}></div>
)
}
And my d3.select is as follows:
context = d3.select(this.refs.arc).append('svg')
.attr("preserveAspectRatio", "xMaxYMin slice")
.attr('viewBox', '0 0 '+width+' '+height)
.classed("svg-content", true)
.append('g').attr('class', 'wrapper')
.attr('transform', `translate(${width / 2}, ${height / 2})`)
setImage(context, id){
var width, height;
width = height = this.props.innerRadius*2;
return context
// .selectAll('.images')
// .data(this.props.img).enter()
.append('defs')
.attr('class', 'images')
.append('pattern')
.attr('id', id)
.attr('width', width)
.attr('height', height)
.attr("patternUnits", "userSpaceOnUse")
.attr("x", -width/2)
.attr("y", -height/2)
.append('image')
// .attr('xlink:href', function(d) {return d})
.attr('xlink:href', this.props.img)
.attr('width', width)
.attr('height', height)
;
}
drawImage(context, size, id){
const { height, width } = this.props;
return context
.append('circle')
.attr('r', size)
.attr('id', id)
.style('fill', 'url(#'+id+')')
;
}
Can anyone tell me what might be going on? I'll post any relevant information upon request.
Update: I decided to try passing text in as well, and THAT seems to update. Not sure whats going on.
I figured it out. I was an idiot and hadn't set an unique ID for each of the images, and they were all being set as the same ID. Thus the .style('fill', 'url(#'+id+')')
was always only filling using the ID of the very first image.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments