d3-v4.x版本-弦图

v4.x 版本-弦图

代码是基于vue 2.x版本项目中，代码注释部分为关键点解释都是基于d3-v4.x版本的。

demo实现效果图如下：

实现代码如下：（包含关键代码注释）

<template>
  <div class="hello">
  </div>
</template>

<script>
const d3 = require("d3");
// import * as d3 from "d3"
export default {
  name: "chord",
  data() {
    return {
      msg: "Welcome to Your Vue.js App"
    };
  },
  mounted: function() {
    this.$nextTick(function() {
      var continent = ["亚洲", "欧洲", "非洲", "美洲", "大洋洲"];

      var matrix = [
        [1975,1199, 5871, 8916, 2868],
        [1951,1951, 10048, 2060, 6171],
        [8010,8010, 16145, 8090, 8045],
        [8010,8010, 16145, 8090, 8045],
        [1013,1013, 990, 940, 6907]
      ];

      var width = 400;
      var height = 400;
      var outerRadius = Math.min(width, height) * 0.5 - 40,
        innerRadius = outerRadius - 30;

      var formatValue = d3.formatPrefix(",.0", 1e3);

      var svg = d3
        .select("body")
        .append("svg")
        .attr("width", width)
        .attr("height", height)
        .style("border", "1px dashed #ccc");

      var formatValue = d3.formatPrefix(",.0", 1e3);

      var chord = d3
        .chord()
        .padAngle(0.03)
        .sortSubgroups(d3.descending);

      var arc = d3
        .arc()
        .innerRadius(innerRadius)
        .outerRadius(outerRadius);

      var ribbon = d3.ribbon().radius(innerRadius);

      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));

      console.log(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 d3.schemeCategory10 [d.index];
        })
        .style("stroke", function(d) {
          return d3.rgb(color(d.index)).darker();
        })
        .attr("class","outerPath")
        .attr("d", arc);
      g
        .selectAll(".outerText")
        .data(chord(matrix).groups)
        .enter()
        .append("text")
        .each(function(d, i) {
          d.angle = (d.startAngle + d.endAngle) / 2;
          d.name = continent[i];
        })
        .attr("class", "outText")
        .attr("dy", ".35em")
        .attr("transform", function(d) {
          var result = "rotate(" + d.angle * 180 / Math.PI + ")";
          result += "translate(0," + -1.0 * (outerRadius + 10) + ")";
          if (d.angle > Math.PI * 3 / 4 && d.angle < Math.PI * 5 / 4) {
            result += "rotate(180)";
          }
          return result;
        })
        .text(function(d) {
          return d.name;
        });

      var acinner = d3.ribbon().radius(innerRadius);
      console.log(chord);
      g
        .selectAll(".innerPath")
        .data(chord(matrix))
        .enter()
        .append("path")
        .attr("class", "innerPath")
        // .attr("d", function(d,i){return acinner(d)}) //和下面直接用生成器效果一样
        .attr("d", acinner)
        .style("fill", function(d) {
          return d3.schemeCategory10[d.source.index];
        });
    });
  },
  beforeDestroy: function() {
    this.$service();
  }
};
</script>