D3.js：如何在「if..else」語句後更改xlink：href圖像

Question

我試圖使用d3.js更改具有不同技能值的每個圖像。 但不知道爲什麼返回值無法返回圖像。

更新2016年2月5日： 似乎ignor AJAX功能

，當我看到我的開發者Tool.i得到這個HTML結果：

<g transform="translate(844,478)"> 
    <pattern class="sNodes" id="image2" width="100%" height="100%"> 
     <image id="node_id31" width="50" height="50"></image> 
    </pattern> 
    <circle r="25" class="sNodes" id="node_id31" fill="url(#image2)" onclick="NodesDownInlv3(31)" indicator="4-n-12-S05"></circle> 
    <text class="sNodes" id="node_id31" style="text-anchor:middle" x="10" y="30">4-n-12-S05</text> 
</g> 

圖像0​​沒有屬性的圖像。

這裏的JS代碼有關xlink:href部分：

elemEnter.append('pattern') 
        .attr('class', d.class) 
        .attr('id', function() { 
         if (d.class == "bNodes") { 
          return 'image'; 
         } else { 
          return 'image2'; 
         } 
        }) 
        .attr('width', '100%') 
        .attr('height', '100%') 
        .append('image') 
        .attr('xlink:href', function() { 
        return 'images/star_03.png'; //this return is work 
         var img; 
         if (d.class == "bNodes") { 
          return 'images/star_01.png'; //this is work 
         } else { 
          //return 'images/star_02.png'; 
          //console.log(d.node_sn); 
          $.ajax({ 
           url: 'php/data_Skill.php', 
           type: 'POST', 
           data: { 
            node_sn: parseInt(d.node_sn) 
           }, 
          }) 
           .done(function(data) { 
            var arr_data = data.split(";"); 
            arr_data = arr_data.filter(function(str) { 
             return /\S/.test(str); 
            }); 

            arr_data.forEach(function(index) { 
             index = index.split(','); 
             console.log(index); 
             var ind = index[0]; 
             var skill = parseInt(index[1]); //skill = 0, 15, 20, 52, 70, 100 
             console.log(ind, skill); 
             var indicate_id = d.indicate_id.split("("); 
             indicate_id = indicate_id[1].split(")"); 
             indicate_id = indicate_id[0]; //indicate_id = "4-n12-S05" ,ind="4-n-12-S05" 
             //console.log(mapSN) 
             //image = 'images/star_02.png'; 
             if (indicate_id == ind) { 
              if (skill == 0) { 
               img = 'images/star_02.png'; 
              } else if (skill == 15 || skill == 20 || skill == 52 || skill == 70) { 
               img = 'images/star_04.png'; 
              } else if (skill == 100) { 
               img = 'images/star_03.png'; 
              } else { 
               img = 'images/star_02.png'; 
              } 
             }else{ 
              img = 'images/star_02.png'; 
             } 
            }) 
           }) 
         return img; //this not work 
         } 
        }) 

Answer 1

有兩種可能的方式來解決這個問題。

1）將async: false設置爲ajax請求。

OR

2）首先創建圖像元素，然後設置圖像URL，如下所示。

d3.selectAll("pattern").selectAll("image").each(setImageUrl); 
function setImageUrl(d) { 
    var imageEl = this; 
    d3.select(imageEl).attr("xlink:href","images/star_03.png"); 
    if (d.class == "bNodes") { 
     d3.select(imageEl).attr("xlink:href",'images/star_01.png'); 
    } else { 
     $.ajax({ 
      url: 'php/data_Skill.php', 
      type: 'POST', 
      data: { 
      node_sn: parseInt(d.node_sn) 
      }, 
    }).done(function(data) { 
      var img; 
      var arr_data = data.split(";"); 
      arr_data = arr_data.filter(function(str) { 
      return /\S/.test(str); 
      }); 
      arr_data.forEach(function(index) { 
       index = index.split(',');     
       var ind = index[0]; 
       var skill = parseInt(index[1]); //skill = 0, 15, 20, 52, 70, 100 
       var indicate_id = d.indicate_id.split("("); 
       indicate_id = indicate_id[1].split(")"); 
       indicate_id = indicate_id[0]; //indicate_id = "4-n12-S05" ,ind="4-n-12-S05" 
       if (indicate_id == ind) { 
        if (skill == 0) { 
         img = 'images/star_02.png'; 
        } else if (skill == 15 || skill == 20 || skill == 52 || skill == 70) { 
         img = 'images/star_04.png'; 
        } else if (skill == 100) { 
         img = 'images/star_03.png'; 
        } else { 
         img = 'images/star_02.png'; 
        } 
       }else{ 
        img = 'images/star_02.png'; 
       } 
     }); 
     d3.select(imageEl).attr("xlink:href",img); 
     });   
    } 
} 

我個人更喜歡第二選項。