Possibility to add images inside a bar of a bar chart - d3js

Question

I am trying to create this concept with d3js and angular: enter image description here

An important aspect is that I want to add covers inside a bar. After doing a lot research I still haven't figured out how to do this with a svg. I am hoping to get some advice on this over here.

This is a piece of code that comes close I believe, but the image is only present in the dom and not visible on top of the bar:

                  svg.selectAll(".bar")
                      .data(data)
                      .enter().append("rect")
                      .attr("class", "bar")
                      .attr("x", function(d) { return x(d.letter); })
                      .attr("width", x.rangeBand())
                      .attr("y", function(d) { return y(d.frequency); })
                      .attr("height", function(d) { return height - y(d.frequency); })
                        .on('click', function(d, i) {
                          d3.select(this).style("fill", "red");
                           d3.select(this).append("svg:image")
                           .attr("xlink:href", "http://www.e-pint.com/epint.jpg")
                           .attr("width", 50)
                           .attr("height", 70)
                           .attr("x", 0)
                           .attr("y", 0)
                        });

Thanks,

Also any additional comments about this concept and the execution with D3 are welcome

EDIT:

New tryout according to the question posted in the second comment:

.on('click', function(d, i) {
                          d3.select(this)
                            .append("defs").attr('id', 'aap');

                          svg.select("#aap").append("pattern")
                          .attr('x', '0')
                          .attr('y', '0')
                          .attr("height","200")
                          .attr('width', "200")
                          .attr("id", "cover");

                            svg.select("#cover")
                            .append("svg:image")
                            .attr("xlink:href", "http://www.e-pint.com/epint.jpg")
                            .attr("width", 100)
                            .attr("height", 200)
                            .attr("x", 0)
                            .attr("y", 0)
                        });

For somehow now area in the dom is highlighted blue when I hover over it in the inspector: enter image description here

It looks like you're adding the image as a child of the rect. That won't work the image must be a sibling. — Robert Longson, Dec 02 '13 at 11:01
[This question](http://stackoverflow.com/questions/11496734/add-a-background-image-png-to-a-svg-circle-shape) may help. — Lars Kotthoff, Dec 02 '13 at 11:04
Tried both, it still remains invisible. Will add some code to my question about this — Sjaak Rusma, Dec 02 '13 at 11:40
You need to do it as in the answer -- in particular it looks like you're not actually using the defined pattern as a fill. — Lars Kotthoff, Dec 02 '13 at 11:44
Thanks for your comment. I am trying this right now: http://jsfiddle.net/yduKG/3/ — Sjaak Rusma, Dec 02 '13 at 11:57
I think I'm almost there, just need to figure out how it will display the image. The example above used to be a pattern with stripes but I replaced that with svg:image — Sjaak Rusma, Dec 02 '13 at 11:57

score 0 · Answer 1 · edited May 23 '17 at 10:28

I got it working throughout the following code.

http://jsfiddle.net/yduKG/3/

    var svg = d3.select("body").append("svg");

svg
  .append('defs')
  .append('pattern')
    .attr('id', 'diagonalHatch')
    .attr('patternUnits', 'userSpaceOnUse')
    .attr('width', 100)
    .attr('height', 100)
  .append('svg:image')
    .attr("xlink:href", "http://www.e-pint.com/epint.jpg")
        .attr("width", 100)
        .attr("height", 200)
        .attr("x", 0)
        .attr("y", 0);

svg.append("rect")
      .attr("x", 0)
      .attr("width", 100)
      .attr("height", 100)
      .style("fill", 'yellow');

svg.append("rect")
    .attr("x", 0)
    .attr("width", 100)
    .attr("height", 100)
    .style('fill', 'url(#diagonalHatch)');

Special thanks to Lars Kotthoff and this question:

stackoverflow - fill rect with pattern

Possibility to add images inside a bar of a bar chart - d3js

1 Answers1