SVGのD3データで欠落している画像を無視してメソッドを入力します

Question

EDIT：この正確な問題の解決策が見つかりました。私はこの質問の一番下に投稿します。私はもはや答えを加えて編集することはできません。

D3を使用する場合は、動的データソースからSVGに画像を追加しています。

var images = [ 
    'https://avatars2.githubusercontent.com/u/339630?v=3&s=460', 
] 

d3.select('svg') 
    .data(images) 
    .append('image') 
    .attr('xlink:href', function(d) { return d; }) 
    .attr('width', 200) 
    .attr('height', 200) 

画像が存在しない場合、それはそうのように壊れた画像が表示されます：

どのように私は何もすべてでレンダリングしていないことができますか？このような何か私はこのような何かを行うことができます知っている：

const img = $('<img>') 
img.on('load',() => { 
    // image exists! use it... 
}) 
img.on('error',() => { 
    // image does not exist. do nothing... 
}) 
img.attr({ src: 'the url' }) 

しかし、私はD3 dataとenterでこの手法を使用する方法を理解していません。

ソリューション：

 node.append('image') 
      .attr('id', (d, i) => 'image-' + i) 

     data.forEach((d, i) => { 
      const src = d.src 
      var imgTest = new Image() 
      imgTest.onload = function() { 
       svg.select('#image-' + i).attr('xlink:href', src) 
      } 
      imgTest.onerror = function() { 
       // imgTest.src = "fallback image url" 
      } 
      imgTest.src = src 
     }) 

Answer 1

あなたがここにあなたの問題への解決策を見つけることができます。ないきれいなそれでも

How to catch svg image fail to load in D3?

スポイラー警告を作業は、あなたが失敗かどうか、あなたの答えのためのSVGに