1

我有一个简单的问题，但不幸的是我认为我做错了什么。

我有一个生成多个独立图表的页面。我想为每个图表添加一个事件侦听器，这取决于一个单选按钮集。例如，假设单选按钮 [A,B,C] 中有 3 个选项，根据选择的按钮，图表应该显示不同的变量。每个图表都是使用 AJAX 调用异步生成的，并且结构为可重复使用的图表（如此处所述：http: //bost.ocks.org/mike/chart/）

我目前所做的是这些图表创建了自己的事件侦听器，如下所示：

d3.selectAll(".global-control").on("change.pie", readjustPie);

和

d3.selectAll(".global-control").on("change.scatter", readjustScatter);

readjustPie 和 readjustScatter 都是不同“可重用图表”中的函数（例如 pieChart() 和 ScatterChart()）

显然，在执行最新代码时会覆盖一个侦听器（图表是异步生成的）。我想要做的不是在每个函数中添加事件侦听器，而是能够附加一个侦听器。我已经尝试过的选项

d3.selectAll(".global-control")
.on("change.pie", readjustPie)
.on("change.scatter", readjustScatter);

但它不起作用，因为找不到函数（readjust*）（显然，它们不是全局函数）。

这样的事件附加可能吗？

对不起，如果这个问题很愚蠢，但我会很感激任何帮助。

最好的，尼科斯

4

1 回答 1

1

我同意如果你想保持你的代码模块化和可测试，可重用图表不应该知道表单控件。我会在图表 API 上公开“readjustPie”并从全局控制事件中调用它，例如：

d3.selectAll(".global-control")
  .on("change.pie", changePieValue)

function changePieValue(_ctrl){
  var ctrlValue = _ctrl.grabYourValueHere;
  pieChart.readjustPie(_ctrlValue);
  d3.select('#pie-chart-container1')
    .call(pieChart)
}

这是一个例子：http ://bl.ocks.org/biovisualize/4213367

于 2013-04-29T00:14:15.703 回答