Javascript 将数据传递给D3功能-Ext JS 4.2.2

我正试图在ExtJS4.2应用程序中使用D3实现类似的功能

在D3中，“path.attr（“d”，linkArc）；”，调用linkArc函数并将基准传递给linkArc函数。这在D3世界中运行良好

函数tick（）{
路径属性（“d”，链接弧）；
circle.attr（“transform”，transform）；
attr（“transform”，transform）；
}
功能链接弧（d）{
变量dx=d.target.x-d.source.x，
dy=d.target.y-d.source.y，
dr=Math.sqrt（dx*dx+dy*dy）；
返回“M”+d.source.x+”、“+d.source.y+”A“+dr+”、“+dr+”0,1“+d.target.x+”、“+d.target.y”；
}

由于

linkArc

未在

勾选

功能的范围内定义，导致该错误。您必须在

函数中定义该函数，或者按照下面的代码使用它

解决方案1:

tick: function(path)  {
      var widget = this;
      console.log('Inside Tick --');
      path.attr("d", widget.linkArc);
      circle.attr("transform", widget.transform);
      text.attr("transform", widget.transform);
}

解决方案2:

tick: function(path)  {
      function linkArc(d) {
           var dx = d.target.x - d.source.x,
           dy = d.target.y - d.source.y,
           dr = Math.sqrt(dx * dx + dy * dy);
           return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
      };
      function transform(d) {
          return "translate(" + d.x + "," + d.y + ")";
      } 
      console.log('Inside Tick --');
      path.attr("d", linkArc);
      circle.attr("transform", transform);
      text.attr("transform", transform);
}

正如Gilsha所说，这是一个范围问题。但是您还必须添加指向
transform
的正确指针，因为它不会给您带来错误，但不会正常工作

以下是我使用和修改的代码：

谢谢Guillerme Lopes
Ext.application({
        name: 'Fiddle',

        launch: function() {
            Ext.create('Ext.window.Window', {
                width: 900,
                height: 500,
                itemId : 'd3TestWindow',
                title: 'Custom D3',
                listeners: {
                    afterrender: function(window) {
                        var nodes = {};
                        links.forEach(function(link) {
                            link.source = nodes[link.source] || (nodes[link.source] = {
                                name: link.source
                            });
                            link.target = nodes[link.target] || (nodes[link.target] = {
                                name: link.target
                            });
                        });

                        window.force = d3.layout.force().nodes(d3.values(nodes)).links(links).size([window.getWidth(), window.getHeight()]).linkDistance(60).charge(-300).on("tick", window.tick).start();

                        window.svg = d3.select("#" + window.id + "-innerCt").append("svg").attr("width", window.getWidth()).attr("height", window.getHeight());
                        window.appendPath();
                        window.appendCircle();
                        window.appendText();

                        // Per-type markers, as they don't inherit styles.
                        window.svg.append("defs").selectAll("marker").data(["suit", "licensing", "resolved"]).enter().append("marker").attr("id", function(d) {
                            return d;
                        }).attr("viewBox", "0 -5 10 10").attr("refX", 15).attr("refY", - 1.5).attr("markerWidth", 6).attr("markerHeight", 6).attr("orient", "auto").append("path").attr("d", "M0,-5L10,0L0,5");



                    }
                },
                appendPath : function () {
                    var me = this;
                    this.path = this.svg.append("g").selectAll("path").data(me.force.links()).enter().append("path").attr("class", function(d) {
                        return "link " + d.type;
                    }).attr("marker-end", function(d) {
                        return "url(#" + d.type + ")";
                    });
                },
                appendCircle: function() {
                    var me = this;
                    this.circle = this.svg.append("g").selectAll("circle").data(me.force.nodes()).enter().append("circle").attr("r", 6).call(me.force.drag);
                },
                appendText: function() {
                    var me = this;
                    this.text = this.svg.append("g").selectAll("text").data(me.force.nodes()).enter().append("text").attr("x", 8).attr("y", ".31em").text(function(d) {
                        return d.name;
                    });
                },
                transform: function(d) {
                    return "translate(" + d.x + "," + d.y + ")";
                },
                linkArc: function(d) {
                    var dx = d.target.x - d.source.x,
                        dy = d.target.y - d.source.y,
                        dr = Math.sqrt(dx * dx + dy * dy);
                    return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
                },
                tick :  function() {
                    var window = Ext.ComponentQuery.query('#d3TestWindow')[0];
                    window.path.attr("d", window.linkArc);
                    window.circle.attr("transform", window.transform);
                    window.text.attr("transform", window.transform);
                }
            }).show();
        }
    });