javascript - d3.拖拽() : initialize a variable on "start" and use it on "drag" and "end"

Question

我有一个类似于下面的代码:

    var dragme = d3.drag()
        .on("start", function (d) {
           var variable1 =   // complex calucaltion result;
        })
        .on("drag", function (d) {
            //do something with variable1 without repeating the complex calculation 
        })
        .on("end", function (d) {
            //access variable1 again without repeat calculation
        });

如何在不将variable1扩展到drag()上下文之外的情况下实现这一点？

更新:函数调用如下:

d3.select("#container").call(dragme); //#container is a svg group

Answer 1

你可以这样做:

var dragme = d3.drag()
        .on("start", function (d) {
           var variable1 = d3.select(this).attr("x");
           //do some heavy calculation and store in variable
           var calculation = 12354;
           //store it in the data model.
           d.calculation = calculation; 
        })
        .on("drag", function (d) {
          //do something with d.calculation
        })
        .on("end", function (d) {
          //do something with d.calculation    
        });

由于您没有数据，这不是一个好方法:

var dragme = d3.drag()
        .on("start", function (d) {
           var variable1 = d3.select(this).attr("x");
           //do some heavy calculation and store in variable
           var calculation = 12354;
           //store it in the data model.
           d3.select(this)[0][0].my_data = 1234;
        })
        .on("drag", function (d) {
          var calculation = d3.select(this)[0][0].my_data;
          //do something with calculation
        })
        .on("end", function (d) {
          var calculation = d3.select(this)[0][0].my_data;
          //do something with calculation    
        });