Image leaves behind artifacts when resized

[ConnectedRoman]

Hello,

I have finally succeeded in creating a working custom visual.

I have also successfully added an image to the visual:

let image = this.svg.append("svg:image")
        .attr('x', 15)
        .attr('y', -10)
        .attr('width', width * 0.2)
        .attr('height', height * 0.2)
        .attr("xlink:href", logo) //logo is a path

However, resizing this image with transparent background leaves behind artifacts, like this:

 

Using a picture with a white background works better, but it doesn't really fix the problem as resizing the picture quickly leaves the same trail. I can "draw" with the picture, so if I rezize the visual slowly enough I can hide the artifacts. That is not my goal though, as those artifacts shouldn't be there in the first place.

How do I fix that?

EDIT: I just noticed, that it doesn't leave behind artifacts if the visual is resized with the "latches" on the top or left side. Those only stay there if the middle right, bottom right, and bottom middle ones are used. Is the problem somehow with points the image is attached to?

[v-chuncz-msft]

@ConnectedRoman,

Every time the custom visual is resized, it will call update method. So in your case, more and more new images are appended.

[ConnectedRoman]

@v-chuncz-msft

Thank you for your answer - that's what I thought. 

How should I got about fixing it?

Adding a 

d3.selectAll('svg:image').remove();

before the code where I add the picture only accomplishes that the image doesn't even show up in the visual. I also tried initializing image in the class scope but the image still doesn't show up that way.

[v-chuncz-msft · Accepted solution]

@ConnectedRoman,

That's because 'svg:image' is not a valid selector.

d3.selectAll('svg > image').remove();

[ConnectedRoman]

That worked, thank you for bearing with my noobines.