背景图像到气泡图

Question

我想为我的气泡图的每个圆圈添加一个背景图片。我已经阅读了关于不同主题的一些解决方案，但它不能解决我的问题。所有其他风格都正确添加，但不是风格。

  scope.chart = function(rootData){ 

       var diameter = 900, 
        format = d3.format(",d"), 
        color = d3.scale.category20c(); 

       var bubble = d3.layout.pack() 
        .sort(null) 
        .size([diameter, diameter]) 
        .value(function(d) { return (d.size); }) 
        .padding(1.5); 

       var svg = d3.select("body").append("svg") 
        .attr("width", diameter) 
        .attr("height", diameter) 
        .attr("id","svg") 
        .attr("class", "bubble"); 

        var node = svg.selectAll(".node") 
        .data(bubble.nodes(classes(rootData)) 
         .filter(function (d) { 
          return !d.children; 
         })) 
        .enter().append("g") 
        .attr("class", "node") 
        .attr("transform", function (d) { 
         return "translate(" + d.x + "," + d.y + ")"; 
        }); 

       node.append("title") 
        .text(function(d) { return d.className + ": " + format(d.value); }); 

       node.append("circle") 
        .attr("r", function (d) { 
         return d.r; 
        }) 
        .style("opacity", "0") 
        .style("fill", function (d) { 
          return "black" 
        }) 
       .style("background-image", function (d){ 
         return "myImage2.png" 
       }); 

       node.append("text") 
        .attr("dy", ".3em") 
        .style("text-anchor", "middle") 
        .text(function(d) { return d.className.substring(0, d.r/3); }) 
        .style("opacity", "0"); 


       node.on("click", click); 

        d3.selectAll("circle").style("fill", function (d) { 
          return "black" 
        }); 

        d3.select(this).select("circle").style('fill', '#f2f40d'); 
        d3.selectAll("circle").style("filter", null); 
        d3.select(this).select("circle").style("filter", "url(#f1)"); 

       } 

       // Returns a flattened hierarchy containing all leaf nodes under the root. 
       function classes(root) { 
        var classes = []; 

        function recurse(name, node) { 
         if (node.children) node.children.forEach(function (child) { 
          recurse(node.name, child); 
         }); 
         else classes.push({ 
          parameter1: name, 
          className: node.name, 
          size: node.size, 
         }); 
        } 

        recurse(null, root); 
        return {children: classes}; 
       } 
       d3.select(self.frameElement).style("height", diameter + "px"); 
      } 

编辑：这是我试过的代码，但没有图像显示。

/** 
* Create the bubble chart graph 
* @constructor 
*/ 
d3DemoApp.directive('chart', [function($scope) { 

     return { 
      restrict: 'EA', 
      transclude: true, 
      scope: { 
       parameter1: '=parameter1', 
       paramete2: '=paramete2', 
       paramete3: '=paramete3', 
       paramete4: '=paramete4', 
       paramete5: '=paramete5', 
       chartData : '=', 
       myFunction : '=myFunction' 
      }, 

      link: function(scope) { 

       scope.$watch('chartData', function(newValue) { 
        if (newValue){ 
         scope.chart(newValue); 
        } 
       }); 

       scope.chart = function(rootData){ 

        d3.select('svg').remove(); // This delete the graph not wanted 
        d3.select('svg').remove(); // This delete the graph not wanted 

        var diameter = 900, 
         format = d3.format(",d"), 
         color = d3.scale.category20c(); 

        var bubble = d3.layout.pack() 
         .sort(null) 
         .size([diameter, diameter]) 
         .value(function(d) { return (d.paramete5+1); }) 
         .padding(1.5); 

        var svg = d3.select("body").append("svg") 
         .attr("width", diameter) 
         .attr("height", diameter) 
         .attr("id","svg") 
         .attr("class", "bubble"); 

         var node = svg.selectAll(".node") 
         .data(bubble.nodes(classes(rootData)) 
          .filter(function (d) { 
           return !d.children; 
          })) 
         .enter().append("g") 
         .attr("class", "node") 
         .attr("transform", function (d) { 
          return "translate(" + d.x + "," + d.y + ")"; 
         }); 

        node.append("title") 
         .text(function(d) { return d.className + ": " + format(d.value); }); 


        svg.append("defs") 
         .append("pattern") 
         .attr("id", "image") 
         .attr("height","100%") 
         .attr("width","100%") 
         .attr("x", "37%") 
         .attr("y","40%") 
         .append("image") 
         .attr("x", "0%") 
         .attr("y","0%") 
         .attr("viewBox", "0 0 200 200") 
         .attr("height","100") 
         .attr("width","100") 
         .attr("xlink:href", "linkImage"); 


        node.append("circle") 
         .attr("r", function (d) { 
          return d.r; 
         }) 
         .style("opacity", "0") 
         .style("fill", function (d) { 
           return "black" 
         }) 
         .attr("fill", 'url("#image")'); 

        node.append("text") 
         .attr("dy", ".3em") 
         .style("text-anchor", "middle") 
         .text(function(d) { return d.className.substring(0, d.r/3); }) 
         .style("opacity", "0"); 


        node.on("click", click); 
        function click(d) { 
         scope.$apply(function () { 
          console.log("Call on apply"); 
          scope.myFunction(); // Call is just correct once        scope.parameter1 = d.parameter1; 
          scope.paramete3 = d.paramete3; 
          scope.paramete2 = d.title; 
          scope.paramete4 = d.paramete4; 
          scope.paramete5 = d.paramete5; 
         }); 

         d3.selectAll("circle").style("fill", function (d) { 
           return "black" 
         }); 

         d3.select(this).select("circle").style('fill', 'circle'); 
         d3.selectAll("circle").style("filter", null); 
         d3.select(this).select("circle").style("filter", "url(#f1)"); 
         var test = document.getElementById("svg"); 
         function whatClicked(evt) { 
          if (evt.target.id == "svg"){ 
           d3.selectAll("circle").style("fill", function (d) { 
             return "black" 
           }); 
          } 
          scope.myFunction(); 
         } 
         test.addEventListener("click", whatClicked, true); 
        } 

        // Returns a flattened hierarchy containing all leaf nodes under the root. 
        function classes(root) { 
         var classes = []; 

         function recurse(name, node) { 
          if (node.children) node.children.forEach(function (child) { 
           recurse(node.name, child); 
          }); 
          else classes.push({ 
           parameter1: name, 
           className: node.name, 
           title: node.title, 
           value: node.paramete5, 
           paramete4: node.projectId, 
           parameter6: node.parameter7, 
           paramete5: node.paramete5, 
           paramete3: node.paramete3, 
           isLocked:node.isLocked 
          }); 
         } 

         recurse(null, root); 
         return {children: classes}; 
        } 
        d3.select(self.frameElement).style("height", diameter + "px"); 
       } 


       if(typeof scope.chartData != "undefined"){ 
        scope.drawChart(scope.chartData); 
       } 
      } 
     }; 
    }]); 

Answer 1

这里的plunker：https://plnkr.co/edit/Kzr2a4HFG2yJxWfu90ri?p=preview

如果你想显示在SVG元素的背景图像使用defs：

svg.append("defs") 
     .append("pattern") 
      .attr("id", "image") 
      .attr("height","100%") 
      .attr("width","100%") 
      .attr("x", "37%") 
      .attr("y","40%") 
     .append("image") 
      .attr("x", "0%") 
      .attr("y","0%") 
      .attr("viewBox", "0 0 200 200") 
      .attr("height","100") 
      .attr("width","100") 
      .attr("xlink:href", "ImageLink"); 

并给予通过URL这个参考你的元素：

.attr("fill", 'url("#image")');