Question

我有一个d3.js应用程序，它将图像渲染为连接图中的节点。 Chrome更新为34.0.1847.131后，修改图像的不透明度样式属性会导致显示怪异。图像和其他svg元素将消失或变为部分渲染。我已经在Chrome 33.0.1750.117以及最近的Firefox和IE版本中进行了测试，它们都按预期工作。

我创建了一个能够说明这一点的傻瓜：http://plnkr.co/1jKDh5JMiuxouQyqZzGy。

如果有人可以给我一个解决方法或者我的捡拾器中有不正确的东西，请告诉我。否则，它似乎是Chrome 34的一个错误。我在Google Chrome论坛上报告了一个问题，Google Chrome论坛上还有另一篇帖子也存在类似问题。

我的Chrome论坛帖子： http://bit.ly/1lXTHs0

另一位用户的Chrome论坛帖子： http://bit.ly/1ilYMsZ

Answer 1

作为临时解决方法：

一个元素的不透明度影响其他元素的问题似乎只适用于兄弟元素。因此，一种解决方案是将每个元素包装在其自己的<g>元素中（但仍将不透明度的更改应用于元素本身）。

此SVG代码显示正常：

<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

对于简单的d3代码示例，这只需要一些额外的append次调用：

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");

但是，请注意，添加到您选择中的输入元素现在是<g>元素，而不是形状，因此您需要重新选择它们才能修改形状本身。您的示例代码已经执行了此操作，但并非所有示例都可以。

它并不理想 - 除了额外的代码之外，你将DOM元素的数量增加一倍，如果你有很多要素可以开始减慢它们的速度 - 但它是相当公平的现在可以直接实施，然后在大多数Chrome用户更新到修补版本后再删除。

Chrome 34 SVG Bug

1 个答案: