Question

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

我有一个生成多个独立图表的页面。我想为每个图表添加一个事件监听器，这取决于一个单选按钮集。例如，假设单选按钮[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 *）（显然，它们不是全局函数）。

这样的事件可能会附加吗？

对不起，如果问题很愚蠢，但我将不胜感激。

最佳，尼科斯

Answer 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

在d3.js中添加事件侦听器

1 个答案: