Question

在强制布局中添加图像时出现错误。请帮我。我正在使用https://bl.ocks.org/mbostock/1212215在节点上实现图像，但是修改后的d3.js但是我收到了语法错误。

JSON文件：

{
     "nodes": [
         {"name": "server1", "imagen": "images1.png"},
         {"name": "server2", "imagen": "images1.png"},
         {"name": "server3"},
         {"name": "server4"},
         {"name": "app1"},
         {"name": "app2"},
         {"name": "app3"},
         {"name": "db1"},
         {"name": "db2"},
         {"name": "db3"}
     ],

     "links": [
         {"source": 4, "target": 0 },
         {"source": 4, "target": 1 },
         {"source": 4, "target": 2 },
         {"source": 4, "target": 3 },
         {"source": 5, "target": 0 },
         {"source": 5, "target": 1 },
         {"source": 5, "target": 2 },
         {"source": 5, "target": 3 },
         {"source": 6, "target": 0 },
         {"source": 6, "target": 1 },
         {"source": 6, "target": 2 },
         {"source": 6, "target": 3 },
         {"source": 4, "target": 7 },
         {"source": 5, "target": 8 },
         {"source": 5, "target": 9 },
         {"source": 6, "target": 8 }
     ]
 }

代码：

var node = svg.selectAll(".node")
 .data(json.nodes)
 .enter().append("g")
 .attr("class", "node")
 .image("xlink:href", function(d) { return d.imagen });
 .call(force.drag);

Answer 1

您必须使用属性<image>创建xlink:href元素。

 var node = svg.selectAll(".node")
      .data(json.nodes)
      .enter().append("g")
      .attr("class", "node")
      .call(force.drag);

node.append("svg:image")
      .attr("xlink:href", function(d) { return d.imagen });

var json = {
  "nodes": [{
    "name": "Myriel",
    "imagen": "https://dl.dropboxusercontent.com/u/19954023/marvel_force_chart_img/top_spiderman.png"
  }, {
    "name": "Napoleon",
    "imagen": "https://dl.dropboxusercontent.com/u/19954023/marvel_force_chart_img/top_wolverine.png"
  }, {
    "name": "Mlle.Baptistine",
    "imagen": "https://dl.dropboxusercontent.com/u/19954023/marvel_force_chart_img/top_thor.png"
  }, {
    "name": "Mme.Magloire",
    "imagen": "https://dl.dropboxusercontent.com/u/19954023/marvel_force_chart_img/top_hulk.png"
  }],
  "links": [{
    "source": 1,
    "target": 0,
    "value": 1
  }, {
    "source": 2,
    "target": 0,
    "value": 8
  }, {
    "source": 2,
    "target": 3,
    "value": 8
  }]
};

var width = 960,
  height = 500

var svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height);

var force = d3.layout.force()
  .gravity(0.1)
  .charge(-500)
  .linkDistance(100)
  .size([width, height]);

force
  .nodes(json.nodes)
  .links(json.links)
  .start();

var link = svg.selectAll(".link")
  .data(json.links)
  .enter().append("line")
  .attr("class", "link")
  .style("stroke","red");

var node = svg.selectAll(".node")
  .data(json.nodes)
  .enter().append("g")
  .attr("class", "node")
  .call(force.drag);

node.append("svg:image")
  .attr("xlink:href", function(d) {
    return d.imagen;
  })
  .attr("x", function(d) {
    return -25;
  })
  .attr("y", function(d) {
    return -25;
  })
  .attr("height", 50)
  .attr("width", 50)
  .append("title")
  .text(function(d){ return d.name });

force.on("tick", function() {

  link
    .attr("x1", function(d) {
      return d.source.x;
    })
    .attr("y1", function(d) {
      return d.source.y;
    })
    .attr("x2", function(d) {
      return d.target.x;
    })
    .attr("y2", function(d) {
      return d.target.y;
    });
  node
    .attr("transform", function(d) {
      return "translate(" + d.x + "," + d.y + ")";
    });

});

.link {
  stroke: #777;
  stroke-opacity: 0.3;
  stroke-width: 1.5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

在forcelayout中添加图像

1 个答案: