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

Question

使用 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);

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

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