2
D3.js 버전 4를 사용하여 도넛 형 차트를 작성 중입니다.이 차트를 이동하고 작게 만들려고합니다. 나는 그것을 움직일 수는 있지만 그것을 더 작게 만들 수는 없다.d3 : arcTween을 사용하여 도넛 형 차트를 부드럽게 트위닝하려면?
JSFiddle 여기를 클릭하십시오 : https://jsfiddle.net/5sar7yp9/ - 크기를 갑자기 큰 것으로부터 작은 것으로 어떻게 이동하는지 보려면 텍스트를 클릭하십시오.
나는 그것이 내 정의 인 arcTween과 관련이 있다고 의심하지만, 나는 정확히 무엇을 확신하지 못합니다. 어쩌면 인라인해야할까요?
전체 코드 :
function updateDataPoints(series, scales) {
var padAngle = 0.015,
cornerRadius = 3,
floatFormat = d3.format('.4r'),
radius = Math.min(scales.w, scales.h)/2;
var outerRadius = radius * 0.8, innerRadius = radius * 0.6;
var tPie = d3.pie()
.value(function(d) { return floatFormat(d.y); })
.sort(null);
var tArc = d3.arc()
.outerRadius(outerRadius)
.innerRadius(innerRadius)
.cornerRadius(cornerRadius)
.padAngle(padAngle);
function arcTween(d) {
var i = d3.interpolate(this._current, d);
this._current = i(0);
return function(t) { return tArc(i(t)); };
}
var points = series.select(".data-points")
.selectAll("path.data-point")
.data(function(d) { return tPie(d.data_points); });
var points_enter = points.enter()
.append("path")
.each(function(d, i) { this._current = d; })
.attr("class", "data-point arc")
.attr("opacity", 0)
.attr("d", tArc)
.attr("transform", 'translate(' + scales.w/2 + ',' + scales.h/2 + ")")
.transition().duration(1000)
.attr("fill", function(d) { return 'red'; });
var points_update = points.merge(points_enter);
points_update
.attr("fill", function(d) { return 'red'; })
.transition().duration(1000)
.attr("transform", 'translate(' + scales.w/2 + ',' + scales.h/2 + ")")
.attr("opacity", 0.8)
.transition().duration(1000)
.attrTween('d', arcTween);
points.exit().transition()
.duration(1000)
.attrTween("d", arcTween)
.remove();
}
function updateSeries(chart_data, plot, scales) {
var series_data = [chart_data.series[0]];
var series = plot.selectAll(".series").data(series_data);
var series_enter = series.enter().append("g").attr("class", "series");
series_enter.append("g").attr("class", "data-points");
var series_update = series.merge(series_enter);
series.exit().remove();
updateDataPoints(series_update, scales);
}
var svg = d3.select("#chart").append("svg")
.attr("width", 300)
.attr("height", 300)
.append("g")
.attr("transform", "translate(100,100)");
var scales = { w: 100, h: 100},
chart_data = {
'series': [{
'data_points': [
{ x: 1999, y: 20000},
{ x: 2000, y: 12000},
{ x: 2001, y: 14000}
]
}]
},
plot = svg.append('g').attr('class', 'plot');
updateSeries(chart_data, plot, scales);
d3.select('#update').on('click', function() {
scales.w = 50;
scales.h = 50;
updateSeries(chart_data, plot, scales);
});
오 사랑을! 왜 downvote? – Richard
우연히, 전화를 걸었고 나는 아무 것도 클릭하지 않고 재편성하지 않았다. 질문을 편집하지 않으면 15 분이 지나면 수정하지 않겠습니다. 어색한 손가락, 죄송합니다, 지금은 수정되었습니다. –