Javascript D3.js:xlink:href-image在“之后如何更改?”;如果..否则“;声明
我正在尝试使用Javascript D3.js:xlink:href-image在“之后如何更改?”;如果..否则“;声明,javascript,jquery,d3.js,svg,Javascript,Jquery,D3.js,Svg,我正在尝试使用d3.js更改每个具有不同技能值的图像。 但是不知道为什么返回值不能返回图像 更新日期2016/02/05: 似乎忽略了ajax功能 当我看到我的开发工具时,我得到了这个HTML结果: <g transform="translate(844,478)"> <pattern class="sNodes" id="image2" width="100%" height="100%"> <image id="node_id31" wi
d3.js
更改每个具有不同技能值的图像。
但是不知道为什么返回值不能返回图像
更新日期2016/02/05:
似乎忽略了ajax功能
当我看到我的开发工具时,我得到了这个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>
有两种方法可以解决此问题 1) 将ajax请求设置为
async:false
或
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);
});
}
}
我个人更喜欢第二种选择。不行!!不知道为什么这个函数会跳转,你必须先找到图像url,然后再设置。Ajax需要一些时间来获得服务器响应。您必须在函数中异步设置属性。我的代码中有一个意外错误。该属性应该在done回调函数中设置。很抱歉现在试一试,太好了!这是工作,但似乎货物太重了。有什么改进的建议吗?可能是因为ajax响应延迟了。尝试优化您的查询。
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);
});
}
}