const colorScale = d3.scale.category20();
const numberFormat = d3.format(".3s");
const DetailsChordsPanel = React.createClass({
mixins: [ContentLoaderMixin, ChartMixin],
componentDidMount()
{
ChordsDiagramStore.addChangeDataListener(this._onChange);
},
componentWillUnmount()
{
ChordsDiagramStore.removeChangeDataListener(this._onChange);
},
buildChart() {
// generate chord layout
this.chord = d3.layout.chord()
.padding(.05)
.sortSubgroups(d3.descending)
.matrix(this.state.data.matrix);
// Main SVG
this.svgSel = d3.select(this.svg)
.attr('width', '100%')
.attr('height', '100%');
this.zoom = d3.behavior.zoom().on('zoom', this.onZoom);
this.svgSel.call(this.zoom);
this.canvas = this.svgSel.append('g');
const dragB = d3.behavior.drag().on('drag', this.drag).on('dragstart', this.dragStart);
ChordChart.prototype.addChordGraph = function (svg, div, data, names, width, height) {
var self = this;
var scale;
var parsedData = self.parseData(data);
var labels = parsedData[0];
var matrix = parsedData[1];
var color;
var tooltip;
var fill = d3.scale.category10();
var container = svg.append('g');
var r1;
var innerRadius;
//variable which holds boolean value to determinte whether show or not to show legend
var isChecked = $('#legendCheckbox').is(':checked');
//setting size of diagram due to legend
if (isChecked) {
r1 = Math.min(width - 160, height - 160) / 2;
innerRadius = Math.min(width - 160, height - 160) * .41;
} else {
r1 = height / 2;
innerRadius = Math.min(width, height) * .41;
}
var outerRadius = innerRadius * 1.1;
//setting chord layout
var chord = d3.layout.chord()
.padding(.05)
.sortSubgroups(d3.descending)
.matrix(matrix);
//setting tooltip properties
var tooltip = div.append('div')
.attr('class', 'tooltip-relation')
.style('opacity', 0);
container.attr('transform', 'translate(' + (width) / 2 + ',' + (height) / 2 + ')');
//drawring outer parts of diagram
container.append('g').selectAll('path')
.data(chord.groups)
.enter().append('path')
.attr('class', 'arc')
.style('fill', function (d) {
return labels[d.index].includes('destination') ? '#444444' : fill(d.index);
})
.attr('d', d3.svg.arc().innerRadius(innerRadius).outerRadius(outerRadius))
.on('mouseover', self.fade(.05, true, svg, labels, tooltip, names, 'arc'))
.on('mouseout', self.fade(.8, false, svg, labels, tooltip, names, 'arc'));
container.append('g')
.attr('class', 'chord')
.selectAll('path')
.data(chord.chords)
.enter().append('path')
.attr('d', d3.svg.chord().radius(innerRadius))
.style('fill', function (d) { return fill(d.source.index); })
.style('opacity',0.8)
.on('mouseover', self.fade(.05, true, svg, labels, tooltip, names, 'chord'))
.on('mouseout', self.fade(.08, false, svg, labels, tooltip, names, 'chord'));
if (isChecked) {
container.append('g')
.attr('class','chord-text')
.selectAll('.arc')
.data(chord.groups)
.enter().append('svg:text')
.attr('dy', '.35em')
.attr('text-anchor', function (d) { return ((d.startAngle + d.endAngle) / 2) > Math.PI ? 'end' : null; })
.attr('transform', function (d) {
return 'rotate(' + (((d.startAngle + d.endAngle) / 2) * 180 / Math.PI - 90) + ')'
+ 'translate(' + (r1 - 15) + ')'
+ (((d.startAngle + d.endAngle) / 2) > Math.PI ? 'rotate(180)' : '');
})
.text(function (d) {
if (labels[d.index].includes('source')) {
return labels[d.index].replace('source','');
} else {
return labels[d.index].replace('destination','');
}}
);
};
};