Update D3 to v4

This commit is contained in:
Graham Triggs 2017-04-07 11:36:29 -06:00
parent fe61343ce5
commit 5449579543
3 changed files with 49 additions and 32 deletions

File diff suppressed because one or more lines are too long

View file

@ -115,10 +115,9 @@ $(document).ready(function(){
uris.push("${collaborator.collaboratorURI}"); uris.push("${collaborator.collaboratorURI}");
</#list> </#list>
var chord = d3.layout.chord() var chord = d3.chord()
.padding(0.05) .padAngle(0.05)
.sortSubgroups(d3.descending) .sortSubgroups(d3.descending);
.matrix(matrix);
var width = 725; var width = 725;
var height = 725; var height = 725;
@ -126,17 +125,25 @@ $(document).ready(function(){
var inner_radius = Math.min(width, height) * 0.37; var inner_radius = Math.min(width, height) * 0.37;
var outer_radius = Math.min(width, height) * 0.39; var outer_radius = Math.min(width, height) * 0.39;
var fill = d3.scale.category10(); var fill = d3.scaleOrdinal()
.domain(d3.range(20))
.range(["#000000", "#1f77b4", "#aec7e8", "#ff7f0e", "#ffbb78",
"#2ca02c", "#98df8a", "#d62728", "#ff9896", "#9467bd",
"#c5b0d5", "#8c564b", "#c49c94", "#e377c2", "#f7b6d2",
"#7f7f7f", "#c7c7c7", "#bcbd22", "#dbdb8d", "#17becf"
]);
// #9edae5
var svg = d3.select('#chord').append('svg') var svg = d3.select('#chord').append('svg')
.attr('width', width+padding) .attr('width', width+padding)
.attr('height', height+padding) .attr('height', height+padding)
.append('g').attr('transform', 'translate(' + (width+padding) / 2 + ',' + (height+padding) / 2 +')'); .append('g').attr('transform', 'translate(' + (width+padding) / 2 + ',' + (height+padding) / 2 +')')
.datum(chord(matrix));
svg.append('g').selectAll('path').data(chord.groups).enter() svg.append('g').selectAll('path').data(function(chords) { return chords.groups; }).enter()
.append('path').style('fill', function(val) { return val.index == 0 ? "#000000" : fill(val.index); }) .append('path').style('fill', function(val) { return fill(val.index); })
.style('stroke', function(val) { return val.index == 0 ? "#000000" : fill(val.index); }) .style('stroke', function(val) { return fill(val.index); })
.attr('d', d3.svg.arc().innerRadius(inner_radius).outerRadius(outer_radius)) .attr('d', d3.arc().innerRadius(inner_radius).outerRadius(outer_radius))
.on('click', chord_click()) .on('click', chord_click())
.on("mouseover", chord_hover(.05)) .on("mouseover", chord_hover(.05))
.on("mouseout", chord_hover(.8)); .on("mouseout", chord_hover(.8));
@ -153,7 +160,7 @@ $(document).ready(function(){
var chord_ticks = svg.append('g') var chord_ticks = svg.append('g')
.selectAll('g') .selectAll('g')
.data(chord.groups) .data(function (chords) { return chords.groups; })
.enter().append('g') .enter().append('g')
.selectAll('g') .selectAll('g')
.data(group_ticks) .data(group_ticks)
@ -165,14 +172,14 @@ $(document).ready(function(){
svg.append('g') svg.append('g')
.attr('class', 'chord') .attr('class', 'chord')
.selectAll('path') .selectAll('path')
.data(chord.chords) .data(function (chords) { return chords; })
.enter().append('path') .enter().append('path')
.style('fill', function (d) { return fill(d.target.index); }) .style('fill', function (d) { return fill(d.target.index); })
.attr('d', d3.svg.chord().radius(inner_radius)) .attr('d', d3.ribbon().radius(inner_radius))
.style('opacity', .8); .style('opacity', .8);
svg.append("g").selectAll(".arc") svg.append("g").selectAll(".arc")
.data(chord.groups) .data(function (chords) { return chords.groups; })
.enter().append("svg:text") .enter().append("svg:text")
.attr("dy", ".35em") .attr("dy", ".35em")
.attr("style", function(d) { return d.index == 0 ? "font-size: .75em; font-weight: bold;" : "font-size: .70em;"; } ) .attr("style", function(d) { return d.index == 0 ? "font-size: .75em; font-weight: bold;" : "font-size: .70em;"; } )

View file

@ -119,10 +119,9 @@ $(document).ready(function(){
uris.push("${collaborator.collaboratorURI}"); uris.push("${collaborator.collaboratorURI}");
</#list> </#list>
var chord = d3.layout.chord() var chord = d3.chord()
.padding(0.05) .padAngle(0.05)
.sortSubgroups(d3.descending) .sortSubgroups(d3.descending);
.matrix(matrix);
var width = 725; var width = 725;
var height = 725; var height = 725;
@ -130,17 +129,25 @@ $(document).ready(function(){
var inner_radius = Math.min(width, height) * 0.37; var inner_radius = Math.min(width, height) * 0.37;
var outer_radius = Math.min(width, height) * 0.39; var outer_radius = Math.min(width, height) * 0.39;
var fill = d3.scale.category10(); var fill = d3.scaleOrdinal()
.domain(d3.range(20))
.range(["#000000", "#1f77b4", "#aec7e8", "#ff7f0e", "#ffbb78",
"#2ca02c", "#98df8a", "#d62728", "#ff9896", "#9467bd",
"#c5b0d5", "#8c564b", "#c49c94", "#e377c2", "#f7b6d2",
"#7f7f7f", "#c7c7c7", "#bcbd22", "#dbdb8d", "#17becf"
]);
// #9edae5
var svg = d3.select('#chord').append('svg') var svg = d3.select('#chord').append('svg')
.attr('width', width+padding) .attr('width', width+padding)
.attr('height', height+padding) .attr('height', height+padding)
.append('g').attr('transform', 'translate(' + (width+padding) / 2 + ',' + (height+padding) / 2 +')'); .append('g').attr('transform', 'translate(' + (width+padding) / 2 + ',' + (height+padding) / 2 +')')
.datum(chord(matrix));
svg.append('g').selectAll('path').data(chord.groups).enter() svg.append('g').selectAll('path').data(function(chords) { return chords.groups; }).enter()
.append('path').style('fill', function(val) { return val.index == 0 ? "#000000" : fill(val.index); }) .append('path').style('fill', function(val) { return fill(val.index); })
.style('stroke', function(val) { return val.index == 0 ? "#000000" : fill(val.index); }) .style('stroke', function(val) { return fill(val.index); })
.attr('d', d3.svg.arc().innerRadius(inner_radius).outerRadius(outer_radius)) .attr('d', d3.arc().innerRadius(inner_radius).outerRadius(outer_radius))
.on('click', chord_click()) .on('click', chord_click())
.on("mouseover", chord_hover(.05)) .on("mouseover", chord_hover(.05))
.on("mouseout", chord_hover(.8)); .on("mouseout", chord_hover(.8));
@ -157,7 +164,7 @@ $(document).ready(function(){
var chord_ticks = svg.append('g') var chord_ticks = svg.append('g')
.selectAll('g') .selectAll('g')
.data(chord.groups) .data(function(chords) { return chords.groups; })
.enter().append('g') .enter().append('g')
.selectAll('g') .selectAll('g')
.data(group_ticks) .data(group_ticks)
@ -169,14 +176,14 @@ $(document).ready(function(){
svg.append('g') svg.append('g')
.attr('class', 'chord') .attr('class', 'chord')
.selectAll('path') .selectAll('path')
.data(chord.chords) .data(function(chords) { return chords; })
.enter().append('path') .enter().append('path')
.style('fill', function (d) { return fill(d.target.index); }) .style('fill', function (d) { return fill(d.target.index); })
.attr('d', d3.svg.chord().radius(inner_radius)) .attr('d', d3.svg.chord().radius(inner_radius))
.style('opacity', .8); .style('opacity', .8);
svg.append("g").selectAll(".arc") svg.append("g").selectAll(".arc")
.data(chord.groups) .data(function(chords) { return chords.groups; })
.enter().append("svg:text") .enter().append("svg:text")
.attr("dy", ".35em") .attr("dy", ".35em")
.attr("style", function(d) { return d.index == 0 ? "font-size: .75em; font-weight: bold;" : "font-size: .70em;"; } ) .attr("style", function(d) { return d.index == 0 ? "font-size: .75em; font-weight: bold;" : "font-size: .70em;"; } )