Question

我试图在图表中使用D3JS创建圆形图片。这是我的小提琴：http://jsfiddle.net/vsvuyusg/1/

正如你所看到的，在99行我们有这个代码（应该可以工作）：

var defs = svg.append('svg:defs');

node.each(function(d) {
    var _node = d3.select(this);

  defs.append("svg:pattern")
      .attr("id", "circlePicture_" + d.name)
      .append("svg:image")
      .attr("xlink:href",  function(d) {
          var rnd = Math.floor(Math.random() * 64 + 1);
          var imagePath =
                 "http://www.bigbiz.com/bigbiz/icons/ultimate/Comic/Comic"
                 + rnd.toString() + ".gif";
          console.log(imagePath);
          return imagePath;
      })
      .attr("width", 12)
      .attr("height", 12)
      .attr("x", 0)
      .attr("y", 0);

  _node.append("circle")
        .attr("cx", 12)
            .attr("cy", 12)
      .attr("r", 12)
      .style("fill", "url(#circlePicture_" + d.name + ")")
});

我为每个图像创建一个模式，在其上设置节点名称并使用它来填充附加到节点的圆圈（使用与ref相同的节点名称）。

我注意到代码执行后，我在def标记内找不到任何pattern或svg个标记。虽然，创建模式时我们拥有的console.log完全执行。

出了什么问题？

Answer 1

您需要在pattern节点上设置高度/宽度属性：

defs.append("svg:pattern")
  .attr("id", "circlePicture_" + d.name)
  .attr("width", 12)
  .attr("height", 12)
  .append("svg:image")
  ...

更新了fiddle。

关于D3JS的循环图片

1 个答案: