Replace d3.js symbols with images

问题

Referring to this fiddle example:

I need to replace the symbols with images...or possibly a single image at first..like for instance, this image:

https://github.com/favicon.ico

What I am trying in the code is as follows:

vis.selectAll("path")
     .data(nodes)
   .enter().append("path")
     .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
     .append("image")
   .attr("xlink:href", "https://github.com/favicon.ico")
       .attr("x", -8)
       .attr("y", -8)
       .attr("width", 16)
       .attr("height", 16)
       .style("stroke", "black")
       .style("stroke-width", "1px")
       .call(force.drag);

It is appending image tag to each of the path tags, but not showing up the image itself. Any hints?

回答1:

You're appending each image as a child of each path. What you probably want is to append a group that contains both a path and an image (which I think is what you were asking in your first comment).

Something like this:

var groups = vis.selectAll("g")
    .data(nodes).enter()
    .append("g")
    .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
    .call(force.drag);

groups.append("path")
    .attr("d", d3.svg.symbol()
        .size(function(d) { return d.size; })
        .type(function(d) { return d.type; }))
    .style("fill", "steelblue")
    .style("stroke", "black")
    .style("stroke-width", "1.5px");

groups.append("image")
   .attr("xlink:href", "https://github.com/favicon.ico")
       .attr("x", -8)
       .attr("y", -8)
       .attr("width", 16)
       .attr("height", 16)
       .style("stroke", "black")
       .style("stroke-width", "1px");

See: http://jsfiddle.net/findango/a7as6/4/

来源：https://stackoverflow.com/questions/17976895/replace-d3-js-symbols-with-images