Question

 var graph = Vue.component('graph', {
          template: '#graph-template',
          props: {
            data:Array,
          },
          attached: function(){
            this.genGraph();

          },
          methods:{
            genGraph:function(){
              this.data.forEach(function(obj) {

            root = obj;
            root.x0 = h / 2;
            root.y0 = 0;

            this.updateGraph(root);
          })
        },
        updateGraph: function(source) {

              var i = 0;
              var duration = d3.event && d3.event.altKey ? 5000 : 500;


              var nodes = this._tree.nodes(root).reverse();


              nodes.forEach(function(d) { d.y = d.depth * 180; });


              var node = this._svg.selectAll("g.node")
                  .data(nodes, function(d) { 
                    return d.id || (d.id = ++i); 
                  });

              var nodeEnter = node.enter().append("svg:g")
                  .attr("class", "node")
                  .attr("transform", function(d) { 
                    return "translate(" + source.y0 + "," + source.x0 + ")"; 
                  })
                  .on("click", function(d) { 
                    this.updateGraph(d); 
                  });           

              nodeEnter.append("svg:circle")
                  .attr("r", 0)
                  .style("fill", function( d ) { 
                    return d._children ? "lightsteelblue" : "#fff"; 
                  });

              nodeEnter.append('svg:foreignObject')
              .attr("x", -3)
              .attr("y", -15)
              .append("xhtml:body")
              .html(function(d){
                return d.children || d._children ? "<i class='fa fa-server fa-2x' style='color:#e29e3d;'></i>" : "<i class='fa fa-server fa-2x' style='color:#03a9f4;'></i>";
              });
              nodeEnter.append("svg:text")
                  .attr("x", function(d) { return d.children || d._children ? - 15 : 25; })

                  .attr("dy", ".35em")
                  .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
                  .text(function(d) { return d.name; })
                  .style("fill-opacity", 1e-6);

              nodeEnter.append("a")
                  .attr("xlink:href", function (d) { 
                    return "/" + d.id; 
                  })
                  .append("rect")
                  .attr("class", "clickable")
                  .attr("y", -10)
                  .attr("x", function (d) { return d.children || d._children ? -70 : 10; })
                  .attr("width", 60) 
                  .attr("height", 16)
                  .style("fill","rgba(3,169,244,0)")
                  .style("fill-opacity", .3);       

              var nodeUpdate = node.transition()
                  .duration(duration)
                  .attr("transform", function( d ) { 
                    return "translate(" + d.y + "," + d.x + ")"; 
                  }); 

              nodeUpdate.select("circle")
                  .attr("r", 0)
                  .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });

              nodeUpdate.select("text")
                  .style("fill-opacity", 1)
                  .text(function(d){
                    return d.name.split("/").pop();
                  });

              var nodeExit = node.exit().transition()
                  .duration(duration)
                  .attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })
                  .remove();

              nodeExit.select("circle")
                  .attr("r", 1e-6);

              nodeExit.select("text")
                  .style("fill-opacity", 1e-6);

              var link = this._svg.selectAll("path.link")
                  .data(this._tree.links(nodes), function(d) { return d.target.id; });

              link.enter().insert("svg:path", "g")

                  .attr("class", function (d) { return (d.source != root) ? "link_dashed" : "link_continuous" ; })
                  .attr("d", function(d) {
                    var o = {x: source.x0, y: source.y0};
                    return diagonal({source: o, target: o});
                  })
                .transition()
                  .duration(duration)
                  .attr("d", diagonal)
                  .attr("marker-end", "url(#end)"); 

              link.transition()
                  .duration(duration)
                  .attr("d", diagonal)
                  .attr("marker-end", "url(#end)"); 

              link.exit().transition()
                  .duration(duration)
                  .attr("d", function(d) {
                    var o = {x: source.x, y: source.y};
                    return diagonal({source: o, target: o});
                  })
                  .remove();

              nodes.forEach(function(d) {
                d.x0 = d.x;
                d.y0 = d.y;
              });
            }

      }
}

调用updateGraph（）方法时，会发生错误：

未捕获的TypeError：this.updateGraph不是函数。

Answer 1

您将遇到此问题的原因（基于您的上述代码）是因为this.updateGraph(root);与您的组件的范围不同。

在this.data.forEach(function(obj) {行之上添加以下内容：

var self = this;

然后改变：

this.updateGraph(root);

为：

self.updateGraph(root);

希望这有帮助！

无法调用vuejs组件的方法

1 个答案: