可以在条形图的条内添加图像 - d3js答案

【问题标题】：Possibility to add images inside a bar of a bar chart - d3js可以在条形图的条内添加图像 - d3js
【发布时间】：2013-12-18 01:23:58
【问题描述】：

我正在尝试使用 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 执行的其他 cmets

编辑：

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

.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 中的区域上时，它会以蓝色突出显示：

【问题讨论】：

看起来您正在将图像添加为矩形的子元素。这行不通，图像必须是兄弟姐妹。
This question 可能会有所帮助。
两个都试过了，还是不可见。将在我的问题中添加一些代码
您需要按照答案中的方式进行操作 - 特别是看起来您实际上并未使用定义的图案作为填充。
感谢您的评论。我现在正在尝试这个：jsfiddle.net/yduKG/3

标签： javascript angularjs svg d3.js

【解决方案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

【讨论】：