React Component List Returning D3 SVG With Images All The Same As First Image In The List

KHP

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.

KHP

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.

edited at
0

Comments

0 comments
Login to comment

Related

React: Returning iterated list from a stateless component

React: mapping through a list of svg images

how to find first image in a list of images in django

Returning the First Number of a List

I have a list of images "Image1, Image2, Image3...". Is it possible to use for loop to add all of them to a list?

Use D3 to Display SVG image within Angular Component

python list of dictionary in for loop returning all the same values

Why List for Recyclerview returning same items in all positions?

passing image from list(stateless) component to display(stateful) component --react

Resizing React component that holds SVG (d3)

Python check if a list of nodes are all in the same connected component in O(n)

The first timer in a react component list is getting value NaN

List of user images feched from API in React are displayed and all 10 images flash to each user image then the 10th user image stays?

Removing duplicates from a list but returning the same list

Python: Compare first n characters of item in list to first n characters of all other items in same list

Code not returning all list arrays

jQuery, :first on the list, but not first at all

How to make a first selected image as a thumbnail image from a list of images in jquery?

Adding the same component to a list of ggplots

React- Why do all image modals render the same image when mapping over images?

List all images in Mesosphere/Marathon

how do I properly map a list of images returned using getStaticProps ? inside the same component

How to import image (.svg, .png ) in a React Component

React SVG component as background-image to div

Using SVG as a react component with the image link as a prop?

Loading local images in React Native Image component

Find first value and returning the second value in a list

fnmatch only returning the first filename in my list

Mockito - Returning the first element of a list passed into method