Question

我尝试使用d3.js更改具有不同技能值的每张图片。但不知道为什么返回值无法返回图像。

2016/02/05更新：它似乎无视ajax功能

当我看到我的Developer 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>

图片xlink:href属性不在图片中。

这是关于xlink:href部分的JS代码：

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

我个人更喜欢第二种选择。

D3.js：如何在“if..else”语句后更改xlink：href图像

1 个答案: