Chrome 34 SVG Bug - image

Question

I have a d3.js application that renders images as nodes in a connected graph. After Chrome was updated to 34.0.1847.131, modifying opacity style attribute on an image causes display weirdness. Images and other svg elements will disappear or become partial rendered. I have tested in Chrome 33.0.1750.117, as well as recent Firefox and IE versions and they each work as expected.
I created a plunker to demostrate this: http://plnkr.co/1jKDh5JMiuxouQyqZzGy.
If anyone can give me a workaround or if there is something incorrect in my plunker, please let me know. Otherwise, it appears to be a bug with Chrome 34. I have reported an issue on Google Chrome forums, and there is another post on the Google Chrome forums with a similar issue.
My Chrome forums post:
http://bit.ly/1lXTHs0
Another user's Chrome forum post:
http://bit.ly/1ilYMsZ

Answer 1

As a temporary workaround:
The problem with one element's opacity affecting others seems to only apply to sibling elements. So one solution is to wrap each element inside its own <g> element (but still apply the changes in opacity to the element itself).
This SVG code displays fine:
<svg>
<g transform="translate(50,30)">
<g>
<image class="node" xlink:href="http://i.imgur.com/GInbcOj.png" x="100" y="50" width="50px" height="50px" style="opacity: 0.30000000000000004;"></image>
</g>
<g>
<image class="node" xlink:href="http://i.imgur.com/GInbcOj.png" x="300" y="50" width="50px" height="50px" style="opacity: 0.30000000000000004;"></image>
</g>
<g>
<image class="node" xlink:href="http://i.imgur.com/GInbcOj.png" x="200" y="50" width="50px" height="50px"></image>
</g>
<g>
<rect class="node" x="100" y="150" width="50" height="50" style="opacity: 0.30000000000000004;"></rect>
</g>
<g>
<rect class="node" x="300" y="150" width="50" height="50" style="opacity: 0.30000000000000004;"></rect>
</g>
<g>
<rect class="node" x="200" y="150" width="50" height="50"></rect>
</g>
</g>
</svg>
Live example with comparison against the SVG from your original code
For your simple d3 code example, this only requires some extra append calls:
var nodes = svg.selectAll("image.node").data(nodeData);
nodes.enter().append("g").append("image")
.attr("class", "node")
/* ...*/
svg.selectAll("image.node")
.filter(function(d) {
return d.id <= 2;
}).transition().delay(1000).style("opacity","0.3");
var rects = svg.selectAll("rect.node").data(nodeData);
rects.enter().append("g").append("rect")
.attr("class", "node")
/* ...*/
svg.selectAll("rect.node")
.filter(function(d) {
return d.id <= 2;
}).transition().style("opacity","0.3");
However, note that the entering elements added to your selection are now the <g> elements, not the shapes, so you need to re-select them before you can modify the shapes themselves. Your example code already did this, but not all examples would.
It's not ideal — beyond the extra code, you're doubling the number of DOM elements, which could slow things down if you have a lot of elements to start — but it's fairly straightforward to implement now and then remove later once most Chrome users have updated to the patched version.