d3js
关注
分享
扫一扫
文章平均质量分 50
justforuse
做个有情怀的程序员
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
使用D3和FileReader在线生成树形图
在线示例：http://justforuse.github.io/d3/generate-tree/index.html其中绘制树形图部分代码主要来自：http://codepen.io/augbog/pen/LEXZKK?editors=1010有个道友问我该如何在线生成树形图，我当时只是甩给他个d3js，但是他只想看效果让我帮忙做一个。。要实现上传文件绘制树形图，我原以为需要后台返回数据，但其实原创 2017-04-29 22:33:30 · 4712 阅读 · 1 评论 -
d3中x轴数据名称重复导致缺失的问题
参考链接： http://stackoverflow.com/questions/19994328/give-d3-ordinal-axis-labels-different-from-scale-names http://stackoverflow.com/questions/32086486/d3-ordinal-scale-labels-with-same-names具体方式： x.do原创 2016-11-30 22:40:10 · 825 阅读 · 0 评论 -
d3中图表大小自适应区域大小
d3中的图表是使用SVG绘制的，所以图表适应实质还是SVG的自适应大小。为此，对于图表的父元素比如div.container 元素，自然就是使用类似百分比布局的方式实现放缩：.container{ height:80%; width:80%;}那么其中的svg元素就是类似这样的样式：svg{ height:100%; width:100%;}绘制SVG时候代码改为原创 2016-08-27 00:34:27 · 13791 阅读 · 7 评论 -
d3中为每个rect元素绑定带数据的点击事件
要实现的效果是点击每个柱的时候都要返回他的数值，而这个数值我选择将其绑定在value属性上（其实属性名可以自定义，但是不要使用abc这种没有意义的属性）然后正常使用d3中的时间绑定方法绑定rect元素。代码：svg.selectAll(".bar") .data(dataset) .enter() .append("rect") //do something othe原创 2016-08-17 23:00:37 · 9561 阅读 · 7 评论 -
d3中元素拖拽drag实例
参考链接：http://blog.youkuaiyun.com/lzhlzz/article/details/42200579 https://github.com/d3/d3-3.x-api-reference/blob/master/Drag-Behavior.md使用拖拽功能我们可以快速将图标展示成我们需要的样子。d3.behavior.drag()用来构造一个拖拽行为。如果让元素响应这个行为需要使用c原创 2016-07-25 14:29:38 · 15429 阅读 · 0 评论 -
d3图表中饼图的使用示例
d3是一款功能强大的数据可视化库，为我们提供了多种样式的数据显示格式，具体请参考官网：https://d3js.org/饼状图是很常见的数据表格，可以清晰的展示各个部分占总体的多少。效果图： 在线演示：http://www.justforuse.cn/d3/d3.pie/ 首先需要引入d3.v3.js，我用的是v3版本，最新的是v4版本，有些函数用法有差异需要注意。下面代码需要读者了解d3基础的语原创 2016-07-17 13:04:59 · 5982 阅读 · 2 评论 -
d3为饼图初始化添加动画
为了表明数据是刷新后的新数据，有时需要使用动画来直观的提示用户。 关键就是在绘制path的时候使用attrTween函数，其中使用d3.interpolate方法。arcs.append("path") .attr("fill", function (d, i) { return color(i); }) .transition() .delay(f原创 2017-05-18 22:53:55 · 2068 阅读 · 2 评论 -
d3为饼图增加引导线
当d3饼图数据过多或内部文字内容过长时，显示会变得不美观且不直观，常见的解决方式是添加引导线。参考链接：链接<body style=""> <button class="randomize">randomize</button> <script src="./bl.ocks.org_files/d3.v3.min.js.download"></script> <script>原创 2017-09-16 18:00:25 · 3597 阅读 · 3 评论