Question

这可能是一个JS问题，可能不仅仅是一个D3问题

我在一个页面上有几个D3可视化，都是从相同的代码构建的。为了拥有某种命名空间，我创建了一个类（很好，JS中的一个函数），我实例化了它。如下所示：

function AlmViz(params) {
    ... 
    this.svg = this.chartDiv.append("svg")
        .attr("width", this.width + this.margin.left + this.margin.right)
        .attr("height", this.height + this.margin.top + this.margin.bottom)
      .append("g")
        .attr("transform", "translate(" + this.margin.left + "," + this.margin.top + ")");
        ...
}

function loadData(viz) {
    ...   
    viz.svg.selectAll(".bar")
        .data(level_data)
      .enter().append("rect")
             ...
     ...
}

 // I loop here and call this several times
 // with different paramters, so I get a bunch of 
 // different graphs
var viz = new AlmViz(params);
loadData(viz);

 chartDiv.svg.append("a")
    .attr("href", "#")
    .text("to change click here")
    .on("click", change);

我现在想添加一些过渡，这需要使用.on（“点击”，更改）。但是，在所有d3示例中，change函数依赖于访问当前作用域中的变量。如何访问与特定实例的图表对应的AlmViz实例？

注意：这已发布在d3 Google群组中，但似乎没有引起太多关注，所以我想我会回到STO。原帖是这里的： https://groups.google.com/forum/?fromgroups=#!topic/d3-js/1o4mYnMJZTA

Answer 1

您可以将当前状态作为参数传递给您的更改函数，如下所示：

.on("click", function() { change(viz); });

如何使用d3访问变量in / pass参数到回调

1 个答案: