javascript - 在条形图的条形图中添加图像的可能性 - d3js

Question

我正在尝试使用 d3js 和 angular 来创建这个概念:

一个重要的方面是我想在栏的内部添加封面。在做了很多研究之后，我仍然没有弄清楚如何使用 svg 来做到这一点。我希望在这里得到一些关于这方面的建议。

我相信这是一段接近的代码，但图像只存在于 dom 中，在栏的顶部不可见:

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

谢谢，

也欢迎对这个概念和使用 D3 执行的任何其他评论

编辑:

根据第二条评论中的问题进行新的试用:

.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)
                        });

现在，当我在检查器中将鼠标悬停在 dom 中的区域时，它以某种方式突出显示为蓝色:

Answer 1

我通过以下代码让它正常工作。

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

特别感谢 Lars Kotthoff 和这个问题:

stackoverflow - fill rect with pattern