在phonejs中将svg图像显示为d3.js的节点答案

【问题标题】：Display svg image as node of d3.js in phonejs在phonejs中将svg图像显示为d3.js的节点
【发布时间】：2014-03-18 10:51:56
【问题描述】：

使用 phonejs 制作应用程序，使用带有强制布局的 d3.js。我想将图像显示为 d3 的节点。

以下是节点的创建方式：

node = container.append("g").selectAll("image.node")
    .data(nodes_edges_json.nodes)
    .append("svg:image")
    .attr("class", "node")
    .attr("xlink:href", function(nodeObj) { return nodeObj.image; })
    .attr("width", function(nodeObj) { return setHeightWidth(nodeObj); })
    .attr("height", function(nodeObj) { return setHeightWidth(nodeObj); })
    .attr("x", function(nodeObj) { return setXYCoordinates("x", nodeObj); })
    .attr("y", function(nodeObj) { return setXYCoordinates("y", nodeObj); })
    .attr("title",function(nodeObj) { return nodeObj.name;})
    .call(drag);

目前它不显示图像来代替节点。

【问题讨论】：

它显示什么？图片网址是否正确？参见例如this example.
网址是正确的...问题是我在手机上尝试时它不显示图像..@Lars Katthoff

标签： d3.js phonejs

【解决方案1】：

你可能需要添加一个 enter()

node = container.append("g").selectAll("image.node")
.data(nodes_edges_json.nodes).enter() //  <-----------------HERE
.append("svg:image")
.attr("class", "node")
.attr("xlink:href", function(nodeObj) { return nodeObj.image; })
.attr("width", function(nodeObj) { return setHeightWidth(nodeObj); })
.attr("height", function(nodeObj) { return setHeightWidth(nodeObj); })
.attr("x", function(nodeObj) { return setXYCoordinates("x", nodeObj); })
.attr("y", function(nodeObj) { return setXYCoordinates("y", nodeObj); })
.attr("title",function(nodeObj) { return nodeObj.name;})
.call(drag);

【讨论】：

是的，当我在浏览器上测试它时它工作正常，但当我在手机上尝试它时它不显示图像.. @GingerJim