2016-10-11 2 views
2

Я использую D3 для создания визуализации с строками из <image> элементов svg.Как поймать изображение svg не загружается в D3?

Может ли кто-нибудь знать, как я могу загрузить заменяемое изображение, если файл изображения недоступен?

var images= imageGroup.append('svg:image') 
      .attr("xlink:href",function(d,i){ 
         //lines of code to process filename 
       return "/img/" + filename + ".jpg" 

      }) 

ответ

2

Это больше вопрос JavaScript затем d3.js:

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script data-require="[email protected]" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <svg width="100" height="100"></svg> 
 
    <script> 
 
    
 
    // set up svg image tag 
 
    var images = d3.select("svg") 
 
     .append('svg:image') 
 
     .attr('width', 50) 
 
     .attr('height', 50); 
 

 
    // create a test image 
 
    var imgTest = new Image(); 
 
    // if it loads successfully add it to the svg image 
 
    imgTest.onload = function() { 
 
     images.attr("xlink:href", imgTest.src); 
 
    } 
 
    // if it fails test another image 
 
    imgTest.onerror = function() { 
 
     imgTest.src = "https://dummyimage.com/50x50/000/fff.png&text=An+Image!" 
 
    } 
 
    // this will fail 
 
    imgTest.src = "https://does.not/exist.png"; 
 

 
    </script> 
 

 
</body> 
 

 
</html>

Смежные вопросы