d3柱形图响应鼠标事件（二）

最新推荐文章于 2022-12-20 16:41:38 发布
最新推荐文章于 2022-12-20 16:41:38 发布
阅读量1.2k 收藏
点赞数
分类专栏： d3 文章标签： d3.js 鼠标
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaozhu2hao/article/details/68486688
版权

发现一个问题，当d3为元素添加鼠标事件时，如果元素是被包含在symbol之中的，则鼠标事件不会得到响应。直接上代码，可以看到其中的rectback可以响应，但是柱形图中的rect并未得到响应

<html>  
  <head>  
        <meta charset="utf-8">  
        <title>8.1.1 鼠标交互</title>  
  </head> 
  <style>
  
.axis path,
.axis line{
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
}
 
.axis text {
	font-family: sans-serif;
	font-size: 11px;
}

  </style>
<body>
<svg contentScriptType="text/ecmascript" width="2000" xmlns:xlink="http://www.w3.org/1999/xlink" zoomAndPan="magnify" style="background-color:#000000;" contentStyleType="text/css" viewBox="0 0 2000.0 2000.0" height="2000" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" version="1.0">
<defs>
<symbol typename="null" statusvalue="0" statusname="非活动状态" categoryname="chart" groupname="extobj" viewBox="0 0 339 400" id="柱图_2" preserveAspectRatio="none meet" alisaname="柱图">

<rect fill="steelblue" x="30" y="280.1796407185629" width="42.857142857142854" height="89.82035928143712"></rect>
<rect fill="rgb(70, 130, 180)" x="72.85714285714286" y="292.7544910179641" width="42.857142857142854" height="77.24550898203591"></rect>
<rect fill="rgb(70, 130, 180)" x="115.71428571428571" y="154.4311377245509" width="42.857142857142854" height="215.5688622754491"></rect>
<rect fill="rgb(70, 130, 180)" x="158.57142857142856" y="213.7125748502994" width="42.857142857142854" height="156.2874251497006"></rect>
<rect fill="rgb(70, 130, 180)" x="201.42857142857142" y="192.1556886227545" width="42.857142857142854" height="177.8443113772455"></rect>
<rect fill="rgb(70, 130, 180)" x="244.28571428571428" y="70" width="42.857142857142854" height="300"></rect>
<rect fill="steelblue" x="287.1428571428571" y="114.91017964071855" width="42.857142857142854" height="255.08982035928145"></rect>
<text fill="white" font-size="14px" text-anchor="middle" x="30" y="280.1796407185629" dx="21.428571428571427" dy="1em">50</text>
<text fill="white" font-size="14px" text-anchor="middle" x="72.85714285714286" y="292.7544910179641" dx="21.428571428571427" dy="1em">43</text>
<text fill="white" font-size="14px" text-anchor="middle" x="115.71428571428571" y="154.4311377245509" dx="21.428571428571427" dy="1em">120</text>
<text fill="white" font-size="14px" text-anchor="middle" x="158.57142857142856" y="213.7125748502994" dx="21.428571428571427" dy="1em">87</text>
<text fill="white" font-size="14px" text-anchor="middle" x="201.42857142857142" y="192.1556886227545" dx="21.428571428571427" dy="1em">99</text>
<text fill="white" font-size="14px" text-anchor="middle" x="244.28571428571428" y="70" dx="21.428571428571427" dy="1em">167</text>
<text fill="white" font-size="14px" text-anchor="middle" x="287.1428571428571" y="114.91017964071855" dx="21.428571428571427" dy="1em">142</text>
<g class="axis" transform="translate(30,370)" fill="none" font-size="10" font-family="sans-serif" text-anchor="middle">
<path class="domain" stroke="#000" d="M0.5,6V0.5H300.5V6"></path><g class="tick" opacity="1" transform="translate(21.428571428571427,0)">
<line stroke="#000" y2="6" x1="0.5" x2="0.5"></line>
<text fill="#000" y="9" x="0.5" dy="0.71em">0</text>
</g>
<g class="tick" opacity="1" transform="translate(64.28571428571428,0)">
<line stroke="#000" y2="6" x1="0.5" x2="0.5"></line><text fill="#000" y="9" x="0.5" dy="0.71em">1</text></g><g class="tick" opacity="1" transform="translate(107.14285714285714,0)"><line stroke="#000" y2="6" x1="0.5" x2="0.5"></line><text fill="#000" y="9" x="0.5" dy="0.71em">2</text></g><g class="tick" opacity="1" transform="translate(149.99999999999997,0)"><line stroke="#000" y2="6" x1="0.5" x2="0.5"></line><text fill="#000" y="9" x="0.5" dy="0.71em">3</text></g><g class="tick" opacity="1" transform="translate(192.85714285714283,0)"><line stroke="#000" y2="6" x1="0.5" x2="0.5"></line><text fill="#000" y="9" x="0.5" dy="0.71em">4</text></g><g class="tick" opacity="1" transform="translate(235.7142857142857,0)"><line stroke="#000" y2="6" x1="0.5" x2="0.5"></line><text fill="#000" y="9" x="0.5" dy="0.71em">5</text></g><g class="tick" opacity="1" transform="translate(278.57142857142856,0)"><line stroke="#000" y2="6" x1="0.5" x2="0.5"></line><text fill="#000" y="9" x="0.5" dy="0.71em">6</text></g></g><g class="axis" transform="translate(30,70)" fill="none" font-size="10" font-family="sans-serif" text-anchor="end"><path class="domain" stroke="#000" d="M-6,300.5H0.5V0.5H-6"></path><g class="tick" opacity="1" transform="translate(0,300)"><line stroke="#000" x2="-6" y1="0.5" y2="0.5"></line><text fill="#000" x="-9" y="0.5" dy="0.32em">0</text></g><g class="tick" opacity="1" transform="translate(0,264.07185628742513)"><line stroke="#000" x2="-6" y1="0.5" y2="0.5"></line><text fill="#000" x="-9" y="0.5" dy="0.32em">20</text></g><g class="tick" opacity="1" transform="translate(0,228.1437125748503)"><line stroke="#000" x2="-6" y1="0.5" y2="0.5"></line><text fill="#000" x="-9" y="0.5" dy="0.32em">40</text></g><g class="tick" opacity="1" transform="translate(0,192.21556886227546)"><line stroke="#000" x2="-6" y1="0.5" y2="0.5"></line><text fill="#000" x="-9" y="0.5" dy="0.32em">60</text></g><g class="tick" opacity="1" transform="translate(0,156.2874251497006)"><line stroke="#000" x2="-6" y1="0.5" y2="0.5"></line><text fill="#000" x="-9" y="0.5" dy="0.32em">80</text></g><g class="tick" opacity="1" transform="translate(0,120.35928143712576)"><line stroke="#000" x2="-6" y1="0.5" y2="0.5"></line><text fill="#000" x="-9" y="0.5" dy="0.32em">100</text></g><g class="tick" opacity="1" transform="translate(0,84.4311377245509)"><line stroke="#000" x2="-6" y1="0.5" y2="0.5"></line><text fill="#000" x="-9" y="0.5" dy="0.32em">120</text></g><g class="tick" opacity="1" transform="translate(0,48.50299401197606)"><line stroke="#000" x2="-6" y1="0.5" y2="0.5"></line><text fill="#000" x="-9" y="0.5" dy="0.32em">140</text></g><g class="tick" opacity="1" transform="translate(0,12.574850299401191)"><line stroke="#000" x2="-6" y1="0.5" y2="0.5"></line><text fill="#000" x="-9" y="0.5" dy="0.32em">160</text></g></g>
</symbol>
<symbol typename="null" statusvalue="0" statusname="非活动状态" categoryname="chart" groupname="extobj" id="柱图_3" viewBox="0 0 342 244" preserveAspectRatio="none meet" alisaname="柱图">

</symbol>
</defs>
<rect id="backrect" x="565" width="360" y="60.00001525878906" height="260.59869384765625" style="stroke-width:1.0;stroke:none;" fill="#f3efef" transform=""/>
<use id="use2" typename="null" diagram-rtdbids="er:e:der" xmlns:xlink="http://www.w3.org/1999/xlink" style="shape-rendering:auto;" minValue="0" minvalue="0" transform="" width="342.9999694824219" xlink:show="embed" xlink:type="simple" maxvalue="150" maxValue="150" symbolname="柱图" height="244.89190673828125" diagram-xnames="IA:IB:Ic" groupname="extobj" categoryname="chart" x="577" y="74.10810089111328" xlink:href="#柱图_3" xlink:actuate="onLoad"/>
<rect x="94" width="360" height="260.59869384765625" y="60.00001525878906" style="stroke-width:1.0;fill:#f3efef;stroke:none;" transform=""/>
<use id="use1" typename="null" diagram-rtdbids="11:12:13:15:16" xmlns:xlink="http://www.w3.org/1999/xlink" style="shape-rendering:auto;" minValue="-100" minvalue="-100" width="339.8670654296875" xlink:show="embed" xlink:type="simple" maxValue="150" maxvalue="150" symbolname="柱图" diagram-xnames="UA:UB:UC:UAB:UBC" height="260.6965026855469" groupname="extobj" categoryname="chart" x="108.72796630859375" y="66.76885986328125" xlink:href="#柱图_2" xlink:actuate="onLoad"/>
</svg>
<script src="../../d3/d3.v4.js" charset="utf-8"></script> 

<script>  

var dataset = [50, 43, 120, 87, 99, 167, 142];

var width  = 400;	//SVG绘制区域的宽度
var height = 400;	//SVG绘制区域的高度
	
var svg = d3.select("#柱图_2");	//选择<body>

//alert(svg.selectAll("rect"));
svg.selectAll("rect").each(function(){

d3.select(this).on("mouseover",function(d,i){
					d3.select(this)
					  .attr("fill","yellow");
				});
				
})

d3.select("#backrect")
             .on("mouseover",function(d,i){
					d3.select(this)
					  .attr("fill","yellow");
				});
</script> 

</body>

</html>


程序员猪猪侠
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
[知识图谱实战篇] 五.HTML+D3添加鼠标响应事件显示相关节点及边（源码）
02-13
前文介绍了Python3抓取电影实体知识，Seaborn可视化展示电影信息，D3可视化布局，关系图谱基本构建。本篇文章将实现如下图所示的功能，主要包括： 1.建立两种模式，点击“节点”显示所有圆，点击“文字”显示实体名称 2.添加鼠标响应事件，选中某一个节点显示其相关的节点及边 3.鼠标放开恢复所有节点 --------------------- 作者：Eastmount 来源：CSDN 原文：https://blog.csdn.net/Eastmount/article/details/87116136 版权声明：本文为博主原创文章，转载请附上博文链接！
D3.js 鼠标事件
最新发布
weixin_57182748的博客
07-23 1003
其实我们大家都比较熟悉js原生的鼠标事件，像鼠标点击/移动等事件，因为d3归根结底是操作的dom元素，所以一样是可以使用鼠标事件的，使用selection.on（）这个API即可。// 这里的this是获取到的对应的rect元素。// 这里的this是获取到的对应的rect元素。// 这里的this是获取到的对应的rect元素。// 返还的数值是一个数组，返回x y坐标。// 这一步是生成一个矩形元素。// 获取对应的rect元素。// 获取svg元素的节点。// 可以添加动画效果。
d3交互 （鼠标事件）
give it a try
10-23 2231
下定决心，好好过一天~ 这里我的d3是v7版本，框架使用的是vue框架。可以只看methods中写的代码即可 源代码 <template> <div id="MouseD3" width=600 height=600></div> </template> <script> import * as d3 from "d3" export default { name:"MouseD3", mounted(){ .
D3生成柱形图添加鼠标事件(一）
xiaozhu2hao的专栏
03-30 2374
直接上代码 8.1.1 鼠标交互 .axis path, .axis line{ fill: none; stroke: black; shape-rendering: crispEdges; } .axis text { font-family: sans-serif; font-size: 11px;
D3 V4 各种鼠标事件的添加
happy81997的博客
12-14 918
目录 一、拖拽节点 二、放大缩小 D3 V4 各种鼠标事件的添加 一、拖拽节点 //定义拖拽事件 function dragged(d) { d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y); } // //节点绑定事件 g.selectAll("circle") .data(points) .enter().append("circle") .attr("cx", f.
d3js绘制多系统柱形图
01-29
D3.js允许我们创建动态、响应式的柱形图，支持各种自定义选项，如颜色、宽度、标签等。 **二、数据绑定与转换** 1. **数据加载**：首先，你需要将数据导入到JavaScript中。这通常通过`d3.csv()`、`d3.json()`等...
d3绘制基本的柱形图的实现代码
10-17
柱形图是图表中常见的一种，这篇文章主要介绍了d3绘制基本的柱形图的实现代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
柱形图jsp页面代码，自定义柱形颜色与点击事件
09-17
柱形图jsp页面代码，直接传入list到页面，亲测可用，自定义颜色
使用D3.js+Vue实现一个简单的柱形图
10-18
主要介绍了使用D3.js+Vue实现一个简单的柱形图,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
python绘制双柱形图代码实例
09-20
使用`plt.bar()`函数绘制柱形，其中第一个参数是x轴的位置，第二个参数是柱形的高度，第三个参数是柱形的宽度，最后的颜色和标签用于区分不同的数据集。 为了增加图表的可读性，我们可以添加X轴和Y轴的标签。在本例...
d3事件(四)：事件响应是同步的
甘焕的博客
08-12 782
不同于异步执行的任务队列，事件响应是同步的，只要事件被触发，事件响应的相关代码会立即替换到主线程中进行执行，只有事件响应的代码执行完成后，主线程的代码才会接着执行。实例的Dom结构如下：<div class="container"> </div> <!-- 用于确认事件确认测试 --> <a href="#" class="btn btn-primary" id="btnSure">确认</a>实例
D3给柱形图添加hover
小米人的博客
09-05 691
重点代码块： const svg: any = d3.select(this.$refs[ref]) .attr('width', this.width) .attr('height', this.height); svg.append('g') .selectAll('rect') .data(data) .join('rect') .attr('x', (d: any, i: number) => x(i))
php Jpgraph绘制柱形图
yboker的专栏
11-13 1554
[php] view plaincopyprint? include ("src/jpgraph.php");  include ("src/jpgraph_bar.php");    $data = array(19,23,34,38,45,67,71,78,85,87,90,96);         //定义数组    $graph = new Graph(400,300);
[知识图谱实战篇] 五.HTML+D3添加鼠标响应事件显示相关节点及边
杨秀璋的专栏
02-12 8825
前文介绍了Python3抓取电影实体知识，Seaborn可视化展示电影信息，D3可视化布局，关系图谱基本构建。本篇文章将实现如下图所示的功能，主要包括：1.建立两种模式，点击“节点”显示所有圆，点击“文字”显示实体名称 2.添加鼠标响应事件，选中某一个节点显示其相关的节点及边 3.鼠标放开恢复所有节点
d3事件(三):事件的捕获与冒泡
甘焕的博客
08-06 6277
依赖于DOM节点的父子关系，事件的捕获与冒泡都是在父子节点之间传递，用户触发事件后，首先进入捕获阶段，从最顶层的根节点(也就是window)开始依次详细传递，直到查找到事件发生源为止，然后进入事件冒泡阶段，从事件发生源开始依次向上传播事件，流程图如下图所示。             注册事件时，DOM元素监听事件的捕获阶段还是冒泡阶段，只能选择其一，在d3的事件注册中，由on方法的第三个参数(类型
D3.js入门篇-柱状图
Waiting4U
09-02 1931
引言 最近项目中有个新feature需要画一个业务流程的拓扑图，需要用到d3绘制，在这里记录一下学习过程，由于对前端不太熟悉，svg也是刚接触，所以进度感人（手动滑稽），好，进入正题，本篇使用d3完成一个简单的柱状图。 D3 柱状图 首先造一点json格式的数据： **data.json** { &quot;data&quot;:[ {&quot;value&quot;:123}, {&quot;value&quot;:432}, ..
使用d3.js动态获取数据文件，并进行垂直柱状图表渲染
xinxiaoyong的博客
06-10 1620
一、最终效果截图： 二、动态返回的原始数据： 三、数据描述： 本地请求数据的名字：d3-data.csv HTML文件与d3-data.csv文件位置关系：在同一目录级别。 本地请求数据的内容：必须一行一条数据。 year,population 1953,5.94 1964,6.95 1982,10.08 1990,11.34 2000,12.66 2010,13.40 数据详情截图： 四、代码详情： <!DOCTYPE html> <htm...
html柱状图鼠标放到柱上变大,echarts柱状图鼠标悬浮时样式变化问题
weixin_34053992的博客
06-07 3662
想要的效果，当鼠标悬浮某个柱时，该柱能变宽，变大，但不能超出x轴。现在的情况是，当鼠标悬浮某个柱时，该柱能变宽，变大，但超出x轴。源码echart 柱状图 带箭头 调整柱子宽度 设置柱子颜色 hover时改变柱子颜色// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 指定图表...
d3_v5.js绘制柱状图(可添加数据和实现排序功能)
weixin_62268437的博客
12-20 394
这是博主用d3.js第一次绘制的图形，可以实现数据的添加和排序的功能，里面用到了线性比例尺和颜色比例尺等知识，后面都打了备注，因为时间的原因就不一个一个展开说了，源码放在下面，方便我管理也。
echarts柱形图鼠标滚动缩放
06-07
要在Echarts中实现柱形图的鼠标滚动缩放，可以使用Echarts的数据区域缩放功能。具体操作步骤如下： 1. 在Echarts的option中启用数据区域缩放功能，可以通过设置dataZoom属性来实现： ``` option = { ... dataZoom: [ { type: 'inside', //启用鼠标滚轮缩放 start: 0, //起始位置为0 end: 100 //结束位置为100 } ], ... }; ``` 2. 设置xAxis的boundaryGap为true，这样可以让柱形图的第一条数据与y轴对齐： ``` option = { ... xAxis: { type: 'category', data: ['A', 'B', 'C', 'D', 'E'], boundaryGap: true //设置为true }, ... }; ``` 3. 在series中使用barWidth属性来设置柱形图的宽度，可以根据数据量的多少来灵活调整： ``` option = { ... series: [ { name: '数据量', type: 'bar', data: [10, 20, 30, 40, 50], barWidth: 30 //设置柱形图的宽度 } ], ... }; ``` 通过以上操作，您就可以实现Echarts柱形图的鼠标滚动缩放了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值