【D3.js数据可视化系列教程】（二十八）--弦图_数据可视化d3实验弦图-CSDN博客

本文链接：https://blog.csdn.net/tianxuzhang/article/details/14149681

1. 效果

弦图

鼠标悬停效果：

2. 技术分解

2.1 指定圆环和弦的数值

var matrix = [
    [0,  5871, 8916, 2868],//每组是一个部分圆环，数组的每个值是其中的弦的大小
    [ 1951, 10048, 2060, 6171],
    [ 8010, 16145,  0, 8045],
    [ 1013,   990,  940, 6907]
];

2.2 定义弦布局

var chord = d3.layout.chord()// chord函数可以返回两个东东:chord.groups跟chord.chords
        .padding(.05)// padding是圆环之间的距离
        .sortSubgroups(d3.descending)// sortSubgroups 传入一个function，这个function规定了每一行中的元素的排列顺序。
                                     // 同样也有sortGroups 这个是规定行的排列顺序
        .matrix(matrix);// 可以给chord绑定数据，并根据数据进行分割

2.3 绘制圆环并添加鼠标事件

svg.append("g").selectAll("path")
        .data(chord.groups)// 通过chord.groups可以把圆环按照数据分组,即一个圆环一组
        .enter().append("path")
        .style("fill", function(d) { return fill[d.index] })//圆环中第几个玄
        .style("stroke", function(d) { return fill[d.index]; })
        .attr("d", d3.svg.arc().innerRadius(innerRadius).outerRadius(outerRadius))// 画圆环
        .on("mouseover", fade(.1))// 为路径添加鼠标事件
        .on("mouseout", fade(1));
// 返回一个设置透明度的函数
function fade(opacity) {
    return function(g, i) {
        svg.selectAll(".chord path")
            .filter(function(d) {// 过滤器，过滤掉没选中的
                return d.source.index != i && d.target.index != i; 
            })
            .transition()// 过渡
            .style("opacity", opacity);// 不透明度
    };
}

2.4 用弦生成器绘制弦

svg.append("g")
        .attr("class", "chord")
        .selectAll("path")
        .data(chord.chords)// 创造“弦”de参数
        .enter().append("path")
        .attr("d", d3.svg.chord()// 弦生成器，他通过接受一系列的参数来创造“弦”（弦连接两个圆环节点）。而这些参数又可以利用chord.chords生成
          .radius(innerRadius))// 指定内径
        .style("fill", function(d) { 
            return fill[d.target.index];
        })
        .style("opacity", 1);// 不透明

2.5 生成刻度数据

function groupTicks(d) {
    var k = (d.endAngle - d.startAngle) / d.value;// 把圆环平均化，计算每单位所占角度
    return d3.range(0, d.value, 1000).// 生成[0, d.value]之间1000个平均分隔的数字
     map(function(v, i) {//首先创建一个刻度的数组，map遍历并映射。结果就是返回一个1000个值的数组，每个值带有角度和标签属性
        return {
            angle: v * k // 一刻度的角度
            + d.startAngle,// 加完上面偏移量得到最终坐标
            label: i % 5 ? null : v / 1000 + "k"// 每个5个刻度给一个刻度标签
        };
    });
}

2.6 绘制刻度

var ticks = svg.append("g").selectAll("g")
        .data(chord.groups)// 第一次分组,依据是chord.groups即圆环分组
        .enter().append("g").selectAll("g")
        .data(groupTicks)// 第二次分组，依据是刻度对象
        .enter().append("g")
        .attr("transform", function(d) {// 对刻度进行旋转和平移变换
            return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")"
                    + "translate(" + outerRadius + ",0)";
        });
ticks.append("line")// 加刻度线
        .attr("x1", 1)
        .attr("y1", 0)
        .attr("x2", 5)
        .attr("y2", 0)
        .style("stroke", "#000");

ticks.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 d.label; });

3. 完整代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>testD3-25-chord.html</title>
<script type="text/javascript" src="d3.js"></script>
<style>

body {
    font: 10px sans-serif;
}

.chord path {
    fill-opacity: .67;
    stroke: #000;
    stroke-width: .5px;
}


</style>
</head>
<body>
<script type="text/javascript">
//(1) 指定圆环和弦的数值
var matrix = [
    [0,  5871, 8916, 2868],//每组是一个部分圆环，数组的每个值是其中的弦的大小
    [ 1951, 10048, 2060, 6171],
    [ 8010, 16145,  0, 8045],
    [ 1013,   990,  940, 6907]
]; 

var width = 960,
        height = 500,
        innerRadius = Math.min(width, height) * .41,
        outerRadius = innerRadius * 1.1;
//颜色数组
var fill =["#000000", "#FFDD89", "#957244", "#F26223"];

var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height)
        .append("g")
        .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");//因为圆形绘制的时候是以原点为中心绘制的，而我们的图形原点现在在左上角，所以会出现一个问题就是左边跟上边的图表部分会看不到。因此我们使用translate属性来位移一下即可

//(2) 定义弦布局
var chord = d3.layout.chord()// chord函数可以返回两个东东:chord.groups跟chord.chords
        .padding(.05)// padding是圆环之间的距离
        .sortSubgroups(d3.descending)// sortSubgroups 传入一个function，这个function规定了每一行中的元素的排列顺序。同样也有sortGroups 这个是规定行的排列顺序
        .matrix(matrix);// 可以给chord绑定数据，并根据数据进行分割

//(3) 绘制圆环并添加鼠标事件
svg.append("g").selectAll("path")
        .data(chord.groups)// 通过chord.groups可以把圆环按照数据分组,即一个圆环一组
        .enter().append("path")
        .style("fill", function(d) { return fill[d.index] })//圆环中第几个玄
        .style("stroke", function(d) { return fill[d.index]; })
        .attr("d", d3.svg.arc().innerRadius(innerRadius).outerRadius(outerRadius))// 画圆环
        .on("mouseover", fade(.1))// 为路径添加鼠标事件
        .on("mouseout", fade(1));
// 返回一个设置透明度的函数
function fade(opacity) {
    return function(g, i) {
        svg.selectAll(".chord path")
            .filter(function(d) {// 过滤器，过滤掉没选中的
                return d.source.index != i && d.target.index != i; 
            })
            .transition()// 过渡
            .style("opacity", opacity);// 不透明度
    };
}

//(4) 用弦生成器绘制弦
svg.append("g")
        .attr("class", "chord")
        .selectAll("path")
        .data(chord.chords)// 创造“弦”de参数
        .enter().append("path")
        .attr("d", d3.svg.chord()// 弦生成器，他通过接受一系列的参数来创造“弦”（弦连接两个圆环节点）。而这些参数又可以利用chord.chords生成
          .radius(innerRadius))// 指定内径
        .style("fill", function(d) { 
            return fill[d.target.index];
        })
        .style("opacity", 1);// 不透明

//(6) 绘制刻度
var ticks = svg.append("g").selectAll("g")
        .data(chord.groups)// 第一次分组,依据是chord.groups即圆环分组
        .enter().append("g").selectAll("g")
        .data(groupTicks)// 第二次分组，依据是刻度对象
        .enter().append("g")
        .attr("transform", function(d) {// 对刻度进行旋转和平移变换
            return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")"
                    + "translate(" + outerRadius + ",0)";
        });
        
ticks.append("line")// 加刻度线
        .attr("x1", 1)
        .attr("y1", 0)
        .attr("x2", 5)
        .attr("y2", 0)
        .style("stroke", "#000");

ticks.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 d.label; });

//(5) 生成刻度数据
function groupTicks(d) {
    var k = (d.endAngle - d.startAngle) / d.value;// 把圆环平均化，计算每单位所占角度
    return d3.range(0, d.value, 1000).// 生成[0, d.value]之间1000个平均分隔的数字
     map(function(v, i) {//首先创建一个刻度的数组，map遍历并映射。结果就是返回一个1000个值的数组，每个值带有角度和标签属性
        return {
            angle: v * k // 一刻度的角度
            + d.startAngle,// 加完上面偏移量得到最终坐标
            label: i % 5 ? null : v / 1000 + "k"// 每个5个刻度给一个刻度标签
        };
    });
}