作者：跟我搞对象吧 | 来源：互联网 | 2023-05-17 18:11
Imtryingtocreatethechartbelow:我正在尝试创建下面的图表:Eachfinrepresentsasinglestudy,withea
I'm trying to create the chart below:
我正在尝试创建下面的图表:
Each 'fin' represents a single study, with each line being a brand found in that study.
每个'fin'代表一项研究,每一行都是该研究中的品牌。
I received the following code in order to add transitions (see this question), but realized that is was built without using a data join (making updating the data difficult).
我收到以下代码以添加转换(请参阅此问题),但意识到这是在不使用数据连接的情况下构建的(使更新数据变得困难)。
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
Below is my attempt at a refactored version that has a data join, but I have so far been unable to get it working (I get the following error: attribute d: Expected moveto path command ('M' or 'm'), "function n(){var…").
下面是我对具有数据连接的重构版本的尝试,但到目前为止我无法使其工作(我得到以下错误:
属性d:预期的moveto path命令('M'或'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
}
}
Does anyone have any idea how I would be able to refactor Code Block B to work like Code Block A? Thank you.
有谁知道我怎么能重构代码块B像Code Block A一样工作?谢谢。
1 个解决方案
0
In Code Block A, a for loop iterates over every row in the csv, and inside that another for loop iterates four times (one time for each of the four data groups). Moving all this functionality around (and especially declaring the arc function) was the most confusing part.
在代码块A中,for循环遍历csv中的每一行,并且在另一个for循环中迭代四次(四个数据组中的每一个都重复一次)。移动所有这些功能(尤其是声明弧功能)是最令人困惑的部分。
Researching further, I found that you can create the arc function: var arc = d3.svg.arc(); and pass it arguments once innerRadius, startAngle, etc. were processed.
进一步研究,我发现你可以创建弧函数:var arc = d3.svg.arc();并且一旦处理了innerRadius,startAngle等,就传递它的参数。
slice.selectAll('path')
.attr({
'd' : function(d) {
return arc({
innerRadius : //value,
outerRadius : //value,
startAngle : //value,
endAngle : //value
})
}
});
Full code is below. Thanks, all.
完整代码如下。谢谢,所有。
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 $cOntainer= $('.chart'),
m = 40,
width = $container.width() - m,
height = $container.height() - m,
r = Math.min(width, height) / 2;
var angleSize,
study = null;
var arc = d3.svg.arc();
d3.csv('text.csv', ready);
function ready(err, data) {
if (err) console.warn('Error', err);
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) + ' )');
angleSize = (2 * Math.PI) / data.length;
var slice = svg.selectAll('.slice')
.data(theData)
.enter()
.append('g')
.attr('class', 'slice');
var startRadArr = [],
endRadArr = [];
for ( var i = 0; i
京公网安备 11010802041100号