d3中为每个rect元素绑定带数据的点击事件

要实现的效果是点击每个柱的时候都要返回他的数值，而这个数值我选择将其绑定在value属性上（其实属性名可以自定义，但是不要使用abc这种没有意义的属性）

然后正常使用d3中的时间绑定方法绑定rect元素。

代码：

svg.selectAll(".bar").data(dataset).enter().append("rect")//do something other....attr("value", function(d) {return d.value;})
//为每个rect元素绑定click事件
svg.selectAll("rect").on("click", getData)function getData() {//这里我使用了jquery,dom操作感觉比较方便alert($(this).attr("value"));
}

效果：

他的dom结构是这样的：

效果图中我还为rect绑定了mouseenter, mousemove, mouseout事件，完整代码如下：

//这是悬浮提示框
var div = d3.select("body").append("div").attr("class", "tooltip").style("opacity", 0);......svg.selectAll("rect").on("click", getData).on("mouseenter", showTip).on("mousemove", showTip).on("mouseout", hideTip)function showTip() {//定义悬浮框的位置div.html(setTip(this)).style("left", (d3.event.pageX) + "px").style("top", (d3.event.pageY - 28) + "px");div.transition().duration(300).style("opacity", 0.9)}function getData() {alert($(this).attr("value"));}function setTip(obj) {return $(obj).attr("value");}function hideTip() {div.transition().duration(100).style("opacity", 0)}

其中悬浮提示框的样式如下：

div.tooltip {position: fixed;text-align: center;width: 60px;height: 28px;padding: 2px;background: lightsteelblue;border: 0px;border-radius: 8px;pointer-events: none;
}

此文档的作者：justforuse
Github Pages：justforuse

d3中为每个rect元素绑定带数据的点击事件相关推荐

DialogFragment中通过dataBinding绑定View，设置点击事件无效，通过getWindow设置dialog位置和大小无效。
1.问题描述:DialogFragment中通过dataBinding绑定View,设置点击事件无效. private val binding: CoreDialogEditContentBindin ...
uniapp在onLaunch中使用redirectTo或reLaunch跳转页面后点击事件失效
问题描述: 使用uniapp编译成小程序时,在生命周期onLaunch中运用redirectTo或reLaunch跳转页面后点击事件失效,但是如果你重定向的页面中有使用navigator组件跳转后再返 ...
d3带箭头和点击事件的力导向关系图
我一个写java的,最近要求做页面d3图,难为了半天在网上各种找资料,最后弄出来的结果如图所示: 话不多说,完整代码附上,粘贴出去即可看到运行结果,样式可根据需求自行修改: <!DOCTYPE ...
Android中设置RecyclerView的每一个item的单项点击事件
场景 Android中使用Adapter(适配器)给RecycleView设置数据源: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/detail ...
uniapp 在onLaunch中使用redirectTo或reLaunch跳转页面后点击事件失效
好久没有记录了(今天更新下),使用uniapp编译成小程序时,在onLaunch中重定向会导致点击事件失效,但是,如果,你重定向的页面中有使用navigator组件跳转后再返回,点击事件又有效了,在原 ...
代码生涯冲常见的的bug.例如layui表格中日期自动生成、eacharts 报表的重复点击事件
1.layui表格中日期不受控制的自动生成,这种情况往往是你设置了日期类型的强转例对于这种情况你需要定义templet模板 1. {field: 'outtime', title: '离开时间', ...
.net数据源控件绑定mysql_理解asp.net中DropDownList编辑数据源，绑定数据库数据。...
一.理解asp.net绑定数据库终于学习到了连接数据库部分的内容,杨中科老师视频看起来挺轻松的,如果是高清版就更ok了. 我发现我学习新的编程语言会有一个特点,都想要赶紧学习数据库,数据就是一切,有 ...
理解asp.net中DropDownList编辑数据源，绑定数据库数据。
一.理解asp.net绑定数据库终于学习到了连接数据库部分的内容,杨中科老师视频看起来挺轻松的,如果是高清版就更ok了. 我发现我学习新的编程语言会有一个特点,都想要赶紧学习数据库,数据就是一切,有 ...
a标签添加带参数的点击事件
<a οnclick=\"downPolicy('" + policyDto.policyNo + "')\" href='javascript:void ...
vue开发中＜div＞内＜el-button＞无法触发点击事件
<div class="right-items" style="float: right;padding-bottom: 5px"><el-b ...

d3中为每个rect元素绑定带数据的点击事件

d3中为每个rect元素绑定带数据的点击事件相关推荐

最新文章

热门文章