javascript - D3 设计可重用组件以在 "call"期间接受参数

Question

这个问题是在 d3 v5 上的

我正在尝试创建一个接受参数的可重用组件。我在构建组件时找不到语法文档/示例，这将有助于使用参数调用组件。

例如使用原生 d3 画笔，我能够实现这一点:

var data = [
  {id: 1, mv: [100,500]},
  {id: 2, mv: [300,600]},
  {id: 3, mv: [800,1000]}
];

var brush = d3.brushX()
    .extent([[0, 0], [1500, 90]]);
    
var svg = d3.select("svg");

var g = svg.selectAll("g").data(data).enter()
  .append("g")
  .attr("transform", (d,i)=>"translate(0,"+i*100+")");
  
// able to pass a function parameter to brush.move
g.call(brush)
  .call(brush.move, (d,i)=>d.mv);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width=1500 height=1000></svg>

我的问题是:如何编写我的组件，以便我可以接受与 brush.move 中接受的参数类似的参数

这是我在搜索中遇到的内容:

• Simple example of reusable d3 plugin通过 cpbotha
• Developing a D3.js Edge本书，特别是第 3 章，以及 github 中的相关代码

不幸的是，没有一个处理类似于上面的brush.move的参数传递。

我的组件的当前语法与上面的简单示例类似。

myorg.myelement = function() {
  // variables that can be set when constructing the function
  var height = "", maxwidth = "";

  function my(selection) {

    selection.each(function(d,i) {

      var elem = d3.select(this);
      // I have `this`, d and i
      // How can I get the param passed?
      ...

我正在组件中寻找语法来接受调用期间传递的参数

谢谢!

Answer 1

好吧，按照 @altocumulus 的建议，作为公开忏悔，我发布了自己的答案:-)

当然，文档对于如何调用函数非常清楚。只需传递其他参数即可:-)

但是在这里，我将更进一步，为可重用函数创建一个蓝图，该函数接受函数参数并使用该函数，因为我在网上没有找到示例。作为 Javascript 新手，我在这里学到了一些新东西，包括 apply 和 arguments。

// Here's my re-usable component

var myown = {};
myown.brush = function(){

  // setup variable
  var height = 0;
  
  function my(group){
    group.each(function(d,i){
      // here is the code for creating brush
      // note `this` is also available (in addition to d and i), for e.g.
      var b = d3.select(this);
      
      console.log("inside my each "+height);
      
    });
  }
  
  my.move = function (group, position){
    console.log("in move function");
    
    group.each(function(d,i){
      // here is the code for moving the brush
      // note `this` is also available (in addition to d and i), for e.g.
      var b = d3.select(this), that = this;
    
      console.log("inside move each");
      console.log(typeof(position));   // note it is function
      
      // now call that function
      // using "apply" and "arguments"
      let pos = position.apply(that, arguments);
      console.log(pos); 
    
    })
    
    return my;
  }
  
  my.height = function(value){
    if(!arguments.length) return value;
    height = +value;
    return my;
  }
  
  return my;
};

// Okay, now use all that nice code

var data = [
  {id: 1, mv: [100,500]},
  {id: 2, mv: [300,600]},
  {id: 3, mv: [800,1000]}
];

var brush = myown.brush().height(90);
    
var svg = d3.select("svg");

var g = svg.selectAll("g").data(data).enter()
  .append("g")
  .attr("transform", (d,i)=>"translate(0,"+i*100+")");
  
g.call(brush).call(brush.move, (d,i)=>d.mv);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width=1500 height=1000></svg>