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个刻度给一个刻度标签
        };
    });
}

# 数据可视化
Logo
腾讯云开发者社区

腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。

更多推荐

终极指南：Flink SQL连接器版本管理从混乱到有序的升级之路

Apache Flink作为流处理领域的佼佼者，其SQL连接器的版本管理一直是开发者面临的核心挑战。本文将系统讲解Flink SQL连接器版本管理的最佳实践，帮助你轻松应对版本兼容性问题，实现从混乱到有序的升级之旅。## 连接器版本管理的常见痛点 😫在Flink应用开发中，连接器版本管理常常让开发者头疼不已。不同版本的连接器可能导致各种兼容性问题，例如API变更、功能差异甚至运行时错误。

avatar 腾讯云开发者社区

Elasticsearch复杂数据类型终极指南：从入门到精通

Elasticsearch作为功能强大的搜索引擎，支持多种复杂数据类型，让开发者能够灵活处理各种结构化和非结构化数据。本文将带你全面了解Elasticsearch中的复杂数据类型，从基础概念到实际应用，助你轻松掌握数据建模的核心技巧。## 内部对象：构建层级化数据结构在Elasticsearch中，对象类型（Object）是最基础的复杂数据类型之一，用于表示具有嵌套关系的数据。例如，我们可

avatar 腾讯云开发者社区

如何快速搭建Neon无服务器PostgreSQL：面向初学者的完整指南

Neon是一款革命性的无服务器PostgreSQL解决方案，它通过分离存储和计算层，实现了自动扩缩容、类代码式数据库分支以及零级扩展能力。本指南将帮助你从零开始搭建Neon开发环境，体验这款创新数据库的强大功能。## 准备工作：环境要求与依赖项在开始搭建Neon环境前，请确保你的系统满足以下要求：- Linux操作系统（推荐Ubuntu 20.04+或Debian 11+）- Git

avatar 腾讯云开发者社区