javascript - 将 D3 block 转换为 Enyo 组件

Question

我基本上是试图封装 rkirsling's blocks 的功能放在 Enyo 对象中，以便我可以重用它。我首先删除全局变量并将它们切换为已发布的属性。我能够显示球，但它们都呈现在一个位置，并且没有其他功能。我无法添加更多球或从一个球到另一个球画线。

我的想法是我在 restart() 中做错了一些事情。我将大部分代码留在了 jsfiddle 中，因为我不想要大量的代码墙，但我复制了我认为重要的部分。

http://jsfiddle.net/jtPvU/

编辑:看起来 tick() 是问题所在。我引用 path 和 circle 的方式似乎是问题所在。

enyo.kind({
  name: "D3Block",
  published: {
    // mouse event vars
    selected_node: null,
    selected_link: null,
    mousedown_link: null,
    mousedown_node: null,
    mouseup_node: null,
    svg: "",
    path: "",
    circle: "",
    links: [],
    nodes: [],
    colors: null,
    force: null,
    drag_line: null,
    lastNodeId: 0
  },
  initialize: function(clientContainer){
    this.inherited(arguments);
    var width  = 500,
        height = 500;
    this.colors = d3.scale.category10();
    this.svg = d3.select(clientContainer)
      .append('svg')
      .attr('width', width)
      .attr('height', height);

    // set up initial nodes and links
    //  - nodes are known by 'id', not by index in array.
    //  - reflexive edges are indicated on the node (as a bold black circle).
    //  - links are always source < target; edge directions are set by 'left' and 'right'.
    this.nodes = [
        {id: 0, reflexive: false},
        {id: 1, reflexive: true },
        {id: 2, reflexive: false}
      ]
    this.lastNodeId = 2;

      this.links = [
        {source: this.nodes[0], target: this.nodes[1], left: false, right: true },
        {source: this.nodes[1], target: this.nodes[2], left: false, right: true }
      ];

    // init D3 force layout
    this.force = d3.layout.force()
        .nodes(this.nodes)
        .links(this.links)
        .size([width, height])
        .linkDistance(150)
        .charge(-500)
        .on('tick', this.tick())

    // define arrow markers for graph links
    this.svg.append('svg:defs').append('svg:marker')
        .attr('id', 'end-arrow')
        .attr('viewBox', '0 -5 10 10')
        .attr('refX', 6)
        .attr('markerWidth', 3)
        .attr('markerHeight', 3)
        .attr('orient', 'auto')
      .append('svg:path')
        .attr('d', 'M0,-5L10,0L0,5')
        .attr('fill', '#000');

    this.svg.append('svg:defs').append('svg:marker')
        .attr('id', 'start-arrow')
        .attr('viewBox', '0 -5 10 10')
        .attr('refX', 4)
        .attr('markerWidth', 3)
        .attr('markerHeight', 3)
        .attr('orient', 'auto')
      .append('svg:path')
        .attr('d', 'M10,-5L0,0L10,5')
        .attr('fill', '#000');
    // line displayed when dragging new nodes
    this.drag_line = this.svg.append('svg:path')
      .attr('class', 'link dragline hidden')
      .attr('d', 'M0,0L0,0');

    // handles to link and node element groups
    this.path = this.svg.append('svg:g').selectAll('path');
    this.circle = this.svg.append('svg:g').selectAll('g');


    // app starts here
    this.svg.on('mousedown', this.mousedown())
      .on('mousemove', this.mousemove())
      .on('mouseup', this.mouseup());
    // d3.select(window)
    //   .on('keydown', this.keydown())
    //   .on('keyup', this.keyup());
    this.restart();
  },
  tick: function() {
    console.log("TICK TICK");
    var svg = d3.select(this.clientContainer.hasNode());
    console.log(svg);
    var path = this.path;
    var circle = this.circle;
    // if(!path || !circle){return};


    path.attr('d', function(d) {
      var deltaX = d.target.x - d.source.x,
          deltaY = d.target.y - d.source.y,
          dist = Math.sqrt(deltaX * deltaX + deltaY * deltaY),
          normX = deltaX / dist,
          normY = deltaY / dist,
          sourcePadding = d.left ? 17 : 12,
          targetPadding = d.right ? 17 : 12,
          sourceX = d.source.x + (sourcePadding * normX),
          sourceY = d.source.y + (sourcePadding * normY),
          targetX = d.target.x - (targetPadding * normX),
          targetY = d.target.y - (targetPadding * normY);
      return 'M' + sourceX + ',' + sourceY + 'L' + targetX + ',' + targetY;
    });

    circle.attr('transform', function(d) {
      return 'translate(' + d.x + ',' + d.y + ')';
    });
  }
});

Answer 1

我怀疑您对勾号的使用应该是作为回调。您可能想使用enyo.bind()。现在，您正在将 tick 的返回值传递给 'on' 事件。