0

So I'm trying to fill in the node circles with an image from a url. The url points to cloudfront. I looked at this question Adding an image within a circle object in d3 javascript?

However, all I get are blank images. I double checked and made sure that the images exist, yet they won't fill the image. Here is the d3 node.

var node = g.selectAll(".node");
node = node.data(nodes, function(d) {return d.id;});
node.enter().append("circle")
     .attr("class", "node").attr("r", 10)
     .attr("id", function(d,i) {
           return "node"+d.id;
      })
      .attr("fill", function(d) { 
           if (d.mediapath !== undefined) {
             var url = cloudfront + d.mediapath;
             url = "https://github.com/favicon.ico"
             return "url("+url+")";
             return "url(#bg"+d.id+")";
           }
           return color(d.group); })
       .on("mouseover", function(d) {
            d3.select("p").text(d.handle);                    
        })
       .on("click", clicked);

Not all images have an image associated with them. If they do, they have a mediapath attribute, and we use it. Otherwise, we color it. The coloring of the nodes with no images is fine. However, all I get is a white fill instead of an image for the ones that need an image.

Any help is appreciated. Thanks.

Community
  • 1
  • 1
Gargob
  • 251
  • 4
  • 14
  • With the approach you've linked to, you need to define the image as a separate `pattern` and then reference that instead of the actual URL. An alternative approach is to use an `image` element, see e.g. [this question](http://stackoverflow.com/questions/14567809/how-to-add-an-image-to-an-svg-container-using-d3-js). – Lars Kotthoff Oct 23 '14 at 08:15
  • Edit: Can't get formatting to work.. I tried that method by defining my patterns like this 'code' patterns[id] = svg.append("defs") .append("pattern") .attr("id", "bg"+id) .append("image") .attr("xlink:href", imageUrl); – Gargob Oct 23 '14 at 18:06
  • That should work if you then reference the ID of that pattern in the fill. – Lars Kotthoff Oct 23 '14 at 18:25
  • Thanks. I realize now after inspecting in Chrome. I get an error of a message of Resource interpreted as Image but transferred with MIME type binary/octet-stream: I guess I should try and fix that first. – Gargob Oct 24 '14 at 07:13

0 Answers0