Question

我在使用此d3扩展程序时出现问题 - https://github.com/Caged/d3-tip/blob/master/index.js

我的问题是我不太了解源代码。我知道什么时候调用特定的东西，但现在它与整个扩展有什么关系。

例如，在这一行：https://github.com/Caged/d3-tip/blob/master/index.js#L42他们宣布

function tip(vis) {
      svg = getSVGNode(vis)
      if (!svg) return
      point = svg.createSVGPoint()
      rootElement.appendChild(node)
    }

但是我不明白为什么如果我控制日志tip我会把这个功能还给我。因为稍后在代码中调用tip，例如https://github.com/Caged/d3-tip/blob/master/index.js#L52

   tip.show = function() {
      var args = Array.prototype.slice.call(arguments)
      if (args[args.length - 1] instanceof SVGElement) target = args.pop()

      var content = html.apply(this, args),
          poffset = offset.apply(this, args),
          dir     = direction.apply(this, args),
          nodel   = getNodeEl(),
          i       = directions.length,
          coords,
          scrollTop  = document.documentElement.scrollTop ||
            rootElement.scrollTop,
          scrollLeft = document.documentElement.scrollLeft ||
            rootElement.scrollLeft

      nodel.html(content)
        .style('opacity', 1).style('pointer-events', 'all')

      while (i--) nodel.classed(directions[i], false)
      coords = directionCallbacks.get(dir).apply(this)
      nodel.classed(dir, true)
        .style('top', (coords.top + poffset[0]) + scrollTop + 'px')
        .style('left', (coords.left + poffset[1]) + scrollLeft + 'px')

      return tip
    }

我之前从未见过这样的事情，tip被声明为像这样的普通函数，然后你稍后再添加方法。

我更喜欢像

这样的东西

class Tip {
/**
 * Register actions and filters, plus parse IS settings
 *
 * @uses add_action, add_filter, self::get_settings
 * @return null
 */
function __construct() {

那么有人能解释一下这里发生了什么吗？我对第130行特别感兴趣。我试图在源代码中更改方向的处理方式，因为我的实现会抛出错误。

我的理解是，它首先以这种方式direction分配direction = d3TipDirection，然后该行（130）将其重新分配给我调用时传递的函数

var tip = d3.tip()
.direction(function(d) {
  if (d === 'Freshly Milled Bread' || d === 'Freshly Peeled Banana'){return 'ne';}
  if (d === 'Salt') {return 'nw';}
});

但是当line 71以一种我不理解的方式操纵dir（direction的衍生物）时，它会在我身上打破。我无法在apply错误时调用undefined。

因此，对于direction属性及其中的函数，插件体系结构的一般概述以及对我的错误的更具体说明将非常有用并且非常感谢。

D3工具提示无法理解源代码

0 个答案: