使用d3和JQuery实现绑定数据并且批量生成事件的简单实例（详细生动可直接运行，十分好用）
Posted Icy Hunter
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用d3和JQuery实现绑定数据并且批量生成事件的简单实例（详细生动可直接运行，十分好用）相关的知识，希望对你有一定的参考价值。
本文主要展示对于html中事件的批量绑定事件的操作。
下面直接上代码先
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://d3js.org/d3.v5.min.js"></script>
</head>
<body>
<button type="button" class="but" >11</button>
<button type="button" class="but" >12</button>
<button type="button" class="but" >12</button>
<button type="button" class="but" >14</button>
<button type="button" class="but" >15</button>
<button type="button" class="but" >15</button>
<script>
//创建一个需要绑定的事件数据数组
var data = [];
$(".but").each(function(d,i)
var value = $(this).text();
data.push(value);
//使用jQuery获取对应按钮数据
)
//使用d3绑定数据到按钮上，一一对应
d3.selectAll(".but")
.data(data)
//使用d3对按钮进行对应事件数据的绑定
d3.selectAll('.but').on('click',function(d, i)
alert(d)
)
</script>
</body>
</html>
运行页面如下
点击哪个按钮就会出现哪个按钮上对应的数字
因此，只需要创建一个事件数据数组，然后绑定到对应事件响应的实体上，便能够实现不同按钮的不同功能。如果需要实现复杂一点的功能，也只需要增加一个事件类型的数组就好了
实例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://d3js.org/d3.v5.min.js"></script>
</head>
<body>
<button type="button" class="but" >11</button>
<button type="button" class="but" >12</button>
<button type="button" class="but" >12</button>
<button type="button" class="but" >14</button>
<button type="button" class="but" >15</button>
<button type="button" class="but" >15</button>
<script>
//创建一个需要绑定的事件数据数组
var data = [0, 1, 2, 3 , 4, 5];
var eve_data = [111, 888, 999, 10000, 55555, 9999];
//使用d3绑定数据到按钮上，一一对应
d3.selectAll(".but")
.data(data)
//使用d3对按钮进行对应事件数据的绑定
d3.selectAll('.but').on('click',function(d,_)
for(var i=0; i<data.length;i++)
if(d == i)alert(eve_data[i]);
if(d == 5)document.write(d);
)
</script>
</body>
</html>
点击11和第一个15的运行结果如下：
举的例子很简单，但是我感觉意思已经表达到了，能够方便地批量添加事件了。
以上是关于使用d3和JQuery实现绑定数据并且批量生成事件的简单实例（详细生动可直接运行，十分好用）的主要内容，如果未能解决你的问题，请参考以下文章