扩展本机d3组件（如d3.svg.axis（））的惯用方法是什么？

Question

对于d3中的时间序列可视化，我想在轴上突出显示年份。我通过制作自己的xAxis渲染器来实现这一点，该渲染器调用本机axis函数，然后实现我自己的自定义逻辑来格式化它呈现的刻度。

我就是这样做的（see working example on jsbin）：

  xAxis = d3.svg.axis()
    .scale(xScale)

  customXAxis = function(){
    xAxis(this);
    d3.selectAll('.tick', this)
      .classed("year", isYear);
  };

  ...

  xAxis.ticks(10);

  xAxisElement = canvas.append("g")
    .classed("axis x", true)
    .call(customXAxis);

这可以完成工作，但感觉不对劲;并没有真正扩展轴，它只包裹它。理想情况下，我的customXAxis会继承d3的axis组件的属性，因此我可以执行以下操作：

customXAxis.ticks(10)

---

感谢@meetamit和@drakes把它放在一起。以下是我最终得到的结果：http://bl.ocks.org/HerbCaudill/ece2ff83bd4be586d9af

Answer 1

是的，你可以做到这一切。关注mbostock's suggestions here与`d3.rebind'一起获得：

// This outer function is the thing that instantiates your custom axis.
// It's equivalent to the function d3.svg.axis(), which instantiates a d3 axis.
function InstantiateCustomXAxis() {
  // Create an instance of the axis, which serves as the base instance here
  // It's the same as what you named xAxis in your code, but it's hidden
  // within the custom class. So instantiating customXAxis also
  // instantiates the base d3.svg.axis() for you, and that's a good thing.
  var base = d3.svg.axis();

  // This is just like you had it, but using the parameter "selection" instead of
  // the "this" object. Still the same as what you had before, but more
  // in line with Bostock's teachings...
  // And, because it's created from within InstantiateCustomXAxis(), you
  // get a fresh new instance of your custom access every time you call
  // InstantiateCustomXAxis(). That's important if there are multiple
  // custom axes on the page.
  var customXAxis = function(selection) {
    selection.call(base);

    // note: better to use selection.selectAll instead of d3.selectAll, since there
    // may be multiple axes on the page and you only want the one in the selection
    selection.selectAll('.tick', this)
      .classed("year", isYear);
  }

  // This makes ticks() and scale() be functions (aka methods) of customXAxis().
  // Calling those functions forwards the call to the functions implemented on
  // base (i.e. functions of the d3 axis). You'll want to list every (or all)
  // d3 axis method(s) that you plan to call on your custom axis
  d3.rebind(customXAxis, base, 'ticks', 'scale');// etc...

  // return it
  return customXAxis;
}

要使用此课程，请致电

myCustomXAxis = InstantiateCustomXAxis();

您现在也可以致电

myCustomXAxis
  .scale(d3.scale.ordinal())
  .ticks(5)

当然，以下内容将继续有效：

xAxisElement = canvas.append("g")
  .classed("axis x", true)
  .call(myCustomXAxis);

总结

这是在d3中实现类的惯用方法。 Javascript还有其他创建类的方法，比如使用prototype对象，但是d3自己的可重用代码使用上面的方法 - 而不是原型方法。而且，在其中，d3.rebind是将方法调用从自定义类转发到本质上是子类的方法。

Answer 2

经过大量的代码检查和黑客攻击，并与经验丰富的d3人交谈后，我了解到d3.svg.axis()是一个函数（不是对象，也不是类），所以它不能扩展也不能包装。因此，为了“扩展”它，我们将创建一个新轴，在基础axis()上运行选择以选择那些刻度线，然后一次性复制基础axis()中的所有属性，并返回此扩展功能版本。

var customXAxis = (function() {
  var base = d3.svg.axis();

  // Select and apply a style to your tick marks
  var newAxis = function(selection) {
    selection.call(base);
    selection.selectAll('.tick', this)
      .classed("year", isYear);
  };

  // Copy all the base axis methods like 'ticks', 'scale', etc.
  for(var key in base) {
    if (base.hasOwnProperty(key)) {
       d3.rebind(newAxis, base, key);
    }
  }

  return newAxis;
})();

customXAxis现在完全“继承”d3轴组件的属性。您可以安全地执行以下操作：

customXAxis
.ticks(2)
.scale(xScale)
.tickPadding(50)
.tickFormat(dateFormatter);

canvas.append("g").call(customXAxis);

*在@ HerbCaudill的样板代码的帮助下，受@ meetamit的想法启发。

演示：http://jsbin.com/kabonokeki/5/