![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
d3
程序员猪猪侠
这个作者很懒,什么都没留下…
展开
-
D3.js 饼状图的制作
1、数据 有如下数据,需要可视化:var dataset = [ 30 , 10 , 43 , 55 , 13 ]; 这样的值是不能直接绘图的。例如绘制饼状图的一个部分,需要知道一段弧的起始角度和终止角度,这些值都不存在于数组 dataset 中。因此,需要用到布局,布局的作用就是:计算出适合于作图的数据。这个过程称为数据转换2、布局(数据转换)转载 2016-07-25 09:46:00 · 828 阅读 · 1 评论 -
batik1.8相对于1.7的改进
以前写的java程序用的batik1.7。后来1.8出来了并没有发现什么不同,就一直用1.7了。今天偶然间需要做个图表。使用d3生成了一个柱状图,柱状图的代码如下.axis text { font: 10px sans-serif;}.axis path,.axis line { fill: none; stroke: #000; shape-rendering:原创 2016-08-02 11:30:27 · 1444 阅读 · 0 评论 -
d3.js 实时刷新折线图
直接上源代码,html文件 实时刷新折线图 .axis path, .axis line{ fill: none; stroke: black; shape-rendering: crispEdges; } .axis text { font-family: sans-serif; font-s原创 2016-08-03 09:50:00 · 8600 阅读 · 2 评论 -
d3.js 刷新折线图(包括坐标轴及路径的刷新及信息点提示)
接上篇的的刷新折线图的样例,增加了信息点的显示以及坐标轴的更新。坐标轴的时间更新的应用可用于做历史曲线等曲线图。在这里碰到的问题是在mircrosoft Edge下运行完美。但是在chrome下出现刻度线缺失情况。百思不得其解。先上运行结果图:html文件 实时刷新折线图 .axis p原创 2016-08-12 11:38:57 · 4628 阅读 · 0 评论 -
D3生成柱形图添加鼠标事件(一)
直接上代码 8.1.1 鼠标交互 .axis path,.axis line{ fill: none; stroke: black; shape-rendering: crispEdges;} .axis text { font-family: sans-serif; font-size: 11px;转载 2017-03-30 13:53:07 · 2374 阅读 · 0 评论 -
d3柱形图响应鼠标事件(二)
发现一个问题,当d3为元素添加鼠标事件时,如果元素是被包含在symbol之中的,则鼠标事件不会得到响应。直接上代码,可以看到其中的rectback可以响应,但是柱形图中的rect并未得到响应 8.1.1 鼠标交互 .axis path,.axis line{ fill: none; stroke: black;原创 2017-03-30 14:36:51 · 1226 阅读 · 0 评论