0
我試圖創建下表：數據連接在D3旭日形圖
每個「片」代表一個研究中，每行是在研究中發現的一個品牌。
我收到以下代碼以添加轉換（請參閱this question），但是意識到這是在不使用數據連接的情況下構建的（使數據更新變得困難）。
Array.prototype.max = function() { return Math.max.apply(null, this); };
Array.prototype.min = function() { return Math.min.apply(null, this); };
Number.prototype.map = function (in_min, in_max, out_min, out_max) {
return (this - in_min) * (out_max - out_min)/(in_max - in_min) + out_min;
}
var colors = {
'rank1' : '#3FA548',
'rank2' : '#00B09E',
'rank3' : '#8971B3',
'rank4' : '#DFC423',
'rank5' : '#E74341'
};
var angleSize;
d3.text('text.csv', ready);
var study = null;
function ready(err, text) {
if (err) console.warn('Error', err);
var csv = d3.csv.parse(text);
function selectStudy(d) {
study = $(this).attr('study');
updateChart(study);
}
function updateChart(study) {
//Remove and replace with transition
d3.select('#chart svg')
.remove();
if (study) {
csv = csv.filter(function(d) {
return d.study_name === study;
});
} else {
csv = d3.csv.parse(text);
}
var svg = d3.select('#chart')
.append('svg')
.attr({
'width' : 1000,
'height' : 1000,
'id' : 'container'
})
.append('g')
.attr('transform', 'translate(500, 500)');
angleSize = (2 * Math.PI)/csv.length
var group1Array = [],
group2Array = [],
group3Array = [],
group4Array = [];
for (var i = 0; i < csv.length; i++) {
group1Array[i] = Number(csv[i].group1_score);
group2Array[i] = Number(csv[i].group2_score);
group3Array[i] = Number(csv[i].group3_score);
group4Array[i] = Number(csv[i].group4_score);
}
//Loop through every row of data
for (var i = 0; i < csv.length; i++) {
var startRadius = 140,
endRadius = startRadius;
for (var x = 0; x < 4; x++) {
//Increment endRadius based on the data
if (x == 0) {
endRadius += Number(csv[i].group1_score) * 4;
} else if (x == 1) {
endRadius += Number(csv[i].group2_score) * 4;
} else if (x == 2) {
endRadius += Number(csv[i].group3_score) * 4;
} else {
endRadius += Number(csv[i].group4_score) * 4;
}
//Create svg element (arc) with the calculated values
var arc = d3.svg.arc()
.innerRadius(startRadius)
.outerRadius(endRadius)
.startAngle(angleSize * i)
.endAngle(angleSize * (i + 1));
var className,
ratingClass,
studyName;
if (x == 0) {
className = csv[i].group1_class;
ratingClass = 'Group1';
} else if (x == 1) {
className = csv[i].group2_class;
ratingClass = 'Group2';
} else if (x == 2) {
className = csv[i].group3_class;
ratingClass = 'Group3';
} else {
className = csv[i].group4_class;
ratingClass = 'Group4';
}
studyName = csv[i].study_name;
var path = svg.append('path')
.attr({
'class' : className,
'd' : arc,
'company' : csv[i].brand_name,
'cat' : ratingClass,
'study' : studyName,
'startradius' : startRadius,
'endradius' : endRadius,
'startangle' : angleSize * i,
'endangle' : angleSize * (i + 1),
'companyid' : i
})
.on('click', selectStudy);
startRadius = endRadius + 0.3;
}
}
}
}
下面是我在那有一個數據加入一個重構版本嘗試，但我迄今無法得到它的工作（我得到以下錯誤：<path> attribute d: Expected moveto path command ('M' or 'm'), "function n(){var…"）。
var colors = {
'rank1' : '#3FA548',
'rank2' : '#00B09E',
'rank3' : '#8971B3',
'rank4' : '#DFC423',
'rank5' : '#E74341'
};
var $container = $('.chart'),
m = 40,
width = $container.width() - m,
height = $container.height() - m,
r = Math.min(width, height)/2;
var angleSize,
study = null;
d3.csv('text.csv', ready);
function ready(err, data) {
if (err) console.warn('Error', err);
angleSize = (2 * Math.PI)/data.length;
var dataByStudy = d3.nest()
.key(function(d) { return d.study_name; })
.entries(data);
var svg = d3.select('.chart')
.append('svg')
.attr({
'width' : (r + m) * 2,
'height' : (r + m) * 2,
'class' : 'container'
})
.append('g')
.attr('transform', 'translate(' + (width/4) + ', ' + (height/2) + ')');
var slice = svg.selectAll('.slice')
.data(dataByStudy)
.enter()
.append('g')
.attr('class', 'slice');
var startRadius = 140,
endRadius = startRadius;
for (var x = 0; x < 4; x++) {
var path = slice.append('path')
.attr({
'd' : function(d, i) {
var arc = d3.svg.arc()
.innerRadius(startRadius)
.outerRadius(endRadius)
.startAngle(angleSize * i)
.endAngle(angleSize * (i + 1));
return arc;
},
'class' : function(d, i) {
if (x == 0) {
return d.values[i].group1_class;
} else if (x == 1) {
return d.values[i].group2_class;
} else if (x == 2) {
return d.values[i].group3_class;
} else {
return d.values[i].group4_class;
}
},
'company' : function(d, i) {
return d.values[i].brand_name;
},
'cat' : function(d, i) {
if (x == 0) {
return 'Mobile';
} else if (x == 1) {
return 'Social';
} else if (x == 2) {
return 'Digital Marketing';
} else {
return 'Site';
}
},
'study' : function(d, i) {
return d.values[i].study_name;
},
'endradius' : function(d, i) {
if (x == 0) {
return endRadius += Number(d.values[i].group1_score) * 5;
} else if (x == 1) {
return endRadius += Number(d.values[i].group2_score) * 5;
} else if (x == 2) {
return endRadius += Number(d.values[i].group3_score) * 5;
} else {
return endRadius += Number(d.values[i].group4_score) * 5;
}
},
'startradius' : startRadius,
'startangle' : function(d, i) {
return angleSize * i;
},
'endangle' : function(d, i) {
return angleSize * (i + 1);
},
'companyid' : function(d, i) {
return d.values[i].brand_id;
}
});
startRadius = endRadius + 0.3
}
}
有沒有人有任何想法我將能夠重構代碼塊B像代碼塊A一樣工作？謝謝。