topic Image leaves behind artifacts when resized in Developer

Image leaves behind artifacts when resized

ConnectedRoman — Fri, 21 Jul 2017 12:00:59 GMT

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?

Re: Image leaves behind artifacts when resized

v-chuncz-msft — Mon, 24 Jul 2017 09:21:40 GMT

@ConnectedRoman,

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

Re: Image leaves behind artifacts when resized

ConnectedRoman — Mon, 24 Jul 2017 10:15:18 GMT

@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.

Re: Image leaves behind artifacts when resized

v-chuncz-msft — Tue, 25 Jul 2017 05:32:11 GMT

@ConnectedRoman,

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

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

Re: Image leaves behind artifacts when resized

ConnectedRoman — Tue, 25 Jul 2017 13:16:46 GMT

That worked, thank you for bearing with my noobines.