可视化工具--D3--案例分析--Chord Diagram
来源:互联网 发布:linux环境变量配置 编辑:程序博客网 时间:2024/05/18 15:54
可视化工具–D3–案例分析
Chord Diagram
弦图是为了表示一组具有相互关系的单位之间的联系,通常连线表示具有联系,连线的粗细表示权重。D3中有布局可以自动转换数据。这里以D3官方网站example做实际分析。
实例链接 http://bl.ocks.org/mbostock/4062006
部分接口:
outerRadius:设置半径(背线)
innerRadius:设置半径(基线)
formatPrefix:指定值和精度,用来自动判断数据量级
padAngle:设置圆弧之间间隔角度
sortSubgroups:设置矩阵二级分组的排序函数
scaleOrdinal:设置序数变换的颜色
弦图布局把数据分为groups和chords,其中groups为外弦,包括节点和刻度;chords为内弦,包括节点之间连线以及其权重。
添加画布与设置:
var svg = d3.select("svg"), width = +svg.attr("width"), height = +svg.attr("height"), outerRadius = Math.min(width, height) * 0.5 - 40, innerRadius = outerRadius - 30;
生成器创建:
var chord = d3.chord() .padAngle(0.05) .sortSubgroups(d3.descending);
var arc = d3.arc() .innerRadius(innerRadius) .outerRadius(outerRadius);
颜色与精度设置:
var formatValue = d3.formatPrefix(",.0", 1e3);
var color = d3.scaleOrdinal() .domain(d3.range(4)) .range(["#000000", "#FFDD89", "#957244", "#F26223"]);
绘制外部弦:
var g = svg.append("g") .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")") .datum(chord(matrix));
var group = g.append("g") .attr("class", "groups") .selectAll("g") .data(function(chords) { return chords.groups; }) .enter().append("g");
group.append("path") .style("fill", function(d) { return color(d.index); }) .style("stroke", function(d) { return d3.rgb(color(d.index)).darker(); }) .attr("d", arc);
绘制内部弦:
g.append("g") .attr("class", "ribbons") .selectAll("path") .data(function(chords) { return chords; }) .enter().append("path") .attr("d", ribbon) .style("fill", function(d) { return color(d.target.index); }) .style("stroke", function(d) { return d3.rgb(color(d.target.index)).darker(); });
刻度绘制:、
函数
function groupTicks(d, step) { var k = (d.endAngle - d.startAngle) / d.value; return d3.range(0, d.value, step).map(function(value) { return {value: value, angle: value * k + d.startAngle}; });}
绘制
var groupTick = group.selectAll(".group-tick") .data(function(d) { return groupTicks(d, 1e3); }) .enter().append("g") .attr("class", "group-tick") .attr("transform", function(d) { return "rotate(" + (d.angle * 180 / Math.PI - 90) + ") translate(" + outerRadius + ",0)"; });
groupTick.append("line") .attr("x2", 6);
groupTick.filter(function(d) { return d.value % 5e3 === 0; }) .append("text") .attr("x", 8) .attr("dy", ".35em") .attr("transform", function(d) { return d.angle > Math.PI ? "rotate(180) translate(-16)" : null; }) .style("text-anchor", function(d) { return d.angle > Math.PI ? "end" : null; }) .text(function(d) { return formatValue(d.value); });
0 0
- 可视化工具--D3--案例分析--Chord Diagram
- 可视化工具--D3--案例分析--Scatterplot Matrix
- 可视化工具--D3--案例分析--Histogram Chart
- 可视化工具--D3--案例分析--Reingold Tilford Tree
- 可视化工具--D3--案例分析--Day/Hour Heatmap
- D3.js中的Chord Diagram详解
- D3可视化
- 数据可视化工具分析
- 可视化工具–D3–比例尺的使用(quantitative)
- 可视化工具–D3–比例尺的使用(ordinal)
- 可视化工具–D3–颜色的使用
- 可视化工具–D3–坐标轴的使用
- 可视化数据分析(一) 基于Javascript的D3实践学习
- d3可视化新动态
- D3数据库可视化
- 可视化库 D3.js
- 可视化日志分析工具 glTail
- 可视化数据包分析工具-CapAnalysis
- leetcode 28. Implement strStr() 三种解法
- Java对象的创建 —— new之后JVM都做了什么?
- Linux 启动服务的三种方式
- ajax实时刷新
- List与Set的基础知识
- 可视化工具--D3--案例分析--Chord Diagram
- IONIC WebApp之tabs框架样式修改
- 大数据系列修炼-Scala课程04
- PAT 乙级1014. 福尔摩斯的约会(C语言版)
- 【HDU5783】Divide the Sequence(贪心)
- Python 2-3的坑
- 文章标题
- UVA 11270 Tiling Dominoes(用1×2骨牌覆盖n×m棋盘,有多少种方法)
- 转载一篇个人觉得不错的关于对象引用的文章