我在D3中制作了一个日照表.每个“花瓣”表示数据的子集.当用户点击其中一个“花瓣”时,我希望它转换,扇出才能显示该子集(见图)：
我无法正确转换代码.
点击后,所有“花瓣”(除了选定的一个)应该消失,剩下的路径应该沿着圆形动画(使用attrTween,arcTween和interpolate？).将要更改的主要值是angleSize(var angleSize =(2 * Math.PI)/ theData.length;).
我试过使用this,this,this和this作为参考,没有太多的成功.什么是处理动画的最佳方法？
谢谢你的时间！
– >参见Plunker Here.< - 代码如下：
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 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) + ' )');
var slice = svg.selectAll('.slice');
function updateChart(study) {
if (study) {
var theData = data.filter(function(d) {
return d.study_name === study;
});
} else {
var theData = data;
}
slice = slice.data(theData);
slice.enter()
.append('g')
.attr('class','slice');
var angleSize = (2 * Math.PI) / theData.length;
var startRadArr = [],endRadArr = [];
for ( var i = 0; i < data.length; i++ ) {
var startRadius = (width / 20),endRadius = startRadius;
for ( var x = 0; x < 4; x++ ) {
startRadArr.push(startRadius);
if ( x == 0 ) {
endRadius += Number(data[i].group1_score) * (width / 500);
} else if ( x == 1 ) {
endRadius += Number(data[i].group2_score) * (width / 500);
} else if ( x == 2 ) {
endRadius += Number(data[i].group3_score) * (width / 500);
} else {
endRadius += Number(data[i].group4_score) * (width / 500);
}
endRadArr.push(endRadius);
startRadius = endRadius + 0.3;
}
}
var startRadGroup = [],endRadGroup = [];
for (i = 0; i < startRadArr.length; i += 4) {
startRadGroup.push(startRadArr.slice(i,i + 4));
}
for (i = 0; i < endRadArr.length; i += 4) {
endRadGroup.push(endRadArr.slice(i,i + 4));
}
slice.selectAll('path')
.remove();
for ( var x = 0; x < 4; x++ ) {
slice.append('path')
.attr({
'class' : function(d,i) {
if ( x == 0 ) {
return d.group1_class;
} else if ( x == 1 ) {
return d.group2_class;
} else if ( x == 2 ) {
return d.group3_class;
} else {
return d.group4_class;
}
},'company' : function(d,i) {
return d.brand_name;
},'cat' : function(d,i) {
if ( x == 0 ) {
return 'Group1';
} else if ( x == 1 ) {
return 'Group2';
} else if ( x == 2 ) {
return 'Group3';
} else {
return 'Group4';
}
},'study' : function(d,i) {
return d.study_name;
},'companyid' : function(d,i) {
return d.brand_id;
},'startradius' : function(d,i) {
return startRadGroup[i][x];
},'endradius' : function(d,i) {
return endRadGroup[i][x];
},'startangle' : function(d,i) {
return angleSize * i;
},'endangle' : function(d,i) {
return angleSize * (i + 1);
}
})
.on('click',selectStudy);
}
slice.exit()
.remove();
slice.selectAll('path')
.attr({
'd' : function(d) {
return arc({
innerRadius : +d3.select(this)[0][0].attributes.startradius.nodeValue,outerRadius : +d3.select(this)[0][0].attributes.endradius.nodeValue,startAngle : +d3.select(this)[0][0].attributes.startangle.nodeValue,endAngle : +d3.select(this)[0][0].attributes.endangle.nodeValue
})
}
});
}
function selectStudy(d) {
study = $(this).attr('study');
updateChart(study);
}
updateChart();
}
编辑
更新代码(基于this),以包括正确工作的输入,更新和退出模式.仍然不确定过渡.我已经链接的大多数示例都使用类似于d3.interpolate(this._current,a)的东西;在不同的数据之间进行补间.
在这个图表中,this._current和a是相同的,angleSize(var angleSize =(2 * Math.PI)/ theData.length;),startAngle和endAngle是唯一的变化.
解决方法
你的问题是,你不是真正绑定到元素的数据,因此转换是不可能的.我把你的代码搞砸了一点,所以这些数据包含了所有关于起始和结束角度的嵌套信息,所以它可以绑定到每个切片内的路径.
看看这个Plunker：https://plnkr.co/edit/a7cxRplzy66Pc1arM2a9?p=preview
这是修改版本的列表：
var colors = {
Rank1: '#3FA548',Rank2: '#00B09E',Rank3: '#8971B3',Rank4: '#DFC423',Rank5: '#E74341'
};
// Configuration
var $container = $('.chart'),height) / 2;
var study = null;
var arc = d3.svg.arc();
// Load data
d3.csv('text.csv',ready);
// Data loaded callback
function ready(err,err);
var svg = d3.select('.chart')
.append('svg')
.attr({
'width': (r + m) * 2,'height': (r + m) * 2,'class': 'container'
})
.append('g')
.attr('transform',' + (height / 2) + ' )');
var slices = svg.selectAll('.slice');
function updateChart(study) {
var theData = data;
if (study) {
theData = data.filter(function (d) {
return d.study_name === study;
});
}
var angleSize = (2 * Math.PI) / theData.length;
theData.forEach(function (item,i) {
var startRadius = (width / 20),endRadius = startRadius,groupName;
item.paths = [];
for (var g = 0; g < 4; g++) {
item.paths[g] = {};
item.paths[g].startRadius = startRadius;
groupName = 'group' + (g + 1) + '_score';
endRadius += Number(item[groupName]) * (width / 500);
item.paths[g].endRadius = endRadius;
startRadius = endRadius + 0.3;
}
});
// Set the data
slices = slices.data(theData);
// Enter
slices.enter()
.append('g')
.attr('class','slice');
// Exit
slices.exit()
.remove();
// Update
slices
.transition()
.duration(750)
.each(function (dSlice,iSlice) {
var slice = d3.select(this);
var paths = slice.selectAll('path');
// Set data
paths = paths.data(dSlice.paths);
// Exit
paths.exit()
.remove();
// Enter
paths.enter()
.append('path')
.attr('class','path');
// Update
paths
.transition()
.attr({
'class': function (d,i) {
return dSlice['group' + (i + 1) + '_class'];
},'company': dSlice.brand_name,'cat': function (d,i) {
return 'Group' + (i + 1);
},'study': function (d,i) {
return dSlice.study_name;
},'companyid': function (d,i) {
return dSlice.brand_id;
},'startradius': function (d,i) {
return d.startRadius;
},'endradius': function (d,i) {
return d.endRadius;
},'startangle': function (d,i) {
return angleSize * iSlice;
},'endangle': function (d,i) {
return angleSize * (iSlice + 1);
},'d': function (d) {
return arc({
innerRadius: +d.startRadius,outerRadius: +d.endRadius,startAngle: +angleSize * iSlice,endAngle: +angleSize * (iSlice + 1)
})
}
})
.duration(750);
paths.on('click',selectStudy);
});
function selectStudy(d,i) {
study = $(this).attr('study');
updateChart(study);
}
}
updateChart();
}
正如你所看到的,关键是正确准备数据(假设你的例子中的格式.tsv文件不是最好的选择,但有时我们不能选择我们的数据源…)
然后,通过将片段中的每个节点中的路径生成代码放入片中,可以从函数(d,i){…}回调访问数据,并且每个元素恰好接收相应的数据.
另一个技巧是在路径的回调中使用片数据(通过dSlice和iSlice vars在.each函数中访问).这样,这些路径可以自己消耗这些数据.在这种情况下,公司和study_name属性.
