当图像不在D3js中退出时,更改svg图像的xlink:href链接?

时间:2016-03-18 10:07:53

标签: javascript d3.js

我将svg图像附加到图表。但有时图像源可能不存在。为了避免这种情况,我用默认图像替换了未存在的图像。

message.Save(fileName, true);
Process.Start(fileName);

假设目录中不存在d.name +“。jpg”。我必须用default.jpg替换它。

我该怎么办?

提前致谢。

1 个答案:

答案 0 :(得分:1)

执行此操作的一种方法是使用imageonerror处理程序:



<!DOCTYPE html>
<html>

  <head>
    <script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
  </head>

  <body>
    <script>
      var svg = d3.select('body')
        .append('svg')
        .attr('width', 500)
        .attr('height', 500);
        
      var img = svg.append("image")
        .attr("xlink:href", "doesnotexit.jpeg") //<-- try to load this
        .attr("width", 500)
        .attr("height", 500)
        .attr('onerror', function() { //<-- on no we had troubles!
          d3.select(this)
            .attr("xlink:href", "http://lorempixel.com/500/500/sports");
        });
    </script>
  </body>

</html>
&#13;
&#13;
&#13;