시각 화 도구 -- D3 - 사례 분석 -- Chord 다이어그램

시각 화 도구 – D3 – 사례 분석
Chord Diagram

                       ，          ，         。D3            。   D3    example     。

인 스 턴 스 링크http://bl.ocks.org/mbostock/4062006
부분 인터페이스: outerRadius: 반경 (백 라인) innerRadius 설정: 반경 (기선) formatPrefix 설정: 지정 값 과 정밀도, 데이터 급 padAngle 자동 판단 에 사용: 원호 간 간격 각도 설정 sortSubgroups: 매트릭스 2 급 그룹 을 설정 하 는 정렬 함수 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); });