阅读背景:

svg image 图片无法铺满 circle 的问题解决

来源:互联网 

引子

使用d3.js绘制了力布图后,需要在circle中绘制图片,方法如下:

 // 绘制图片
 drawPattern(gContainer) {
      let that = this;
      let gPattern = gContainer.append("g").attr("class", "g-pattern");

      //  添加pattern
      pattern = gPattern.selectAll("pattern").data(that.nodes, function(node) {
        return "pattern" + node.id;
      });
      
      // 赋予宽高
      pattern
        .enter()
        .append("pattern")
        .attr("id", function(node) {
          return "pattern" + node.id;
        })
        .attr("x", 0)
        .attr("y", 0)
        .attr("height", 64)
        .attr("width", 64)
        .append("svg:image");
     
      // 插入图片
      pattern
        .selectAll("image")
        .data(that.nodes, function(node) {
          return "pattern-image" + node.id;
        })
        
        .attr("xlink:href", function(node) {
          return node.image;
        })
        .attr("x", 0)
        .attr("y", 0)
        .attr("height", function(node) {
          return that.imageHeight;
        })
        .attr("width", function(node) {
          return that.imageWidth
        });
    } // 



你的当前访问异常,请进行认证后继续阅读剩余内容。

分享到: