0
파이의 일부 조각이 으로 분리되고 hover시 원형 중심에서 멀리 떨어진 작은 d3 (http://d3js.org/) 원형 차트를 만듭니다. 지금까지 파이의 다른 부분을 분리하여 원의 중심에서 멀리 옮겼지만 분리되어 번역되었습니다. 내 목표는 조각을 그룹화하고 멀리 함께 번역하는 것입니다. Im d3js에 새로 추가되었습니다.d3 원형 차트의 데이터 그룹화
기본적으로 내가 달성하고자하는 것은 요소 중 일부를 그룹화하고 그룹화 된 원산지 중심에서 멀리 옮기는 것입니다. 지금 조각은 따로 따로 번역되고 Im는 부모를 추가하고 그 부모를 센터에서 멀리 옮겨서 문제를 해결할 수 있다고 추측합니다.
그래서 기본적으로 내 질문은 :
어떻게 데이터의 I 그룹 조각 (FX 사람 라벨 음식) 및 원산지의 중심에서 멀리 해당 그룹을 번역 할 수 있습니다?
프로젝트는 아래에서 찾을 수 있으며 하단에는 csv 파일의 내용이 있습니다. 복사는 코드를 html 문서에 붙여 넣고 csv 데이터를 같은 폴더에있는 'data.csv'라는 파일에 붙여 넣습니다.
감사
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.arc path {
stroke: #fff;
}
</style>
<body>
<!--https://github.com/mhemesath/r2d3/-->
<!--[if lte IE 8]><script src="r2d3.min.js"></script><![endif]-->
<!--[if gte IE 9]><!-->
<script src="http://d3js.org/d3.v3.min.js"></script>
<!--<![endif]-->
<script>
// dimension
var width = 960,
height = 500,
radius = Math.min(width, height)/2;
// colors
var color = d3.scale.ordinal()
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
var arc = d3.svg.arc()
.outerRadius(radius - 10)
.innerRadius(0);
var pie = d3.layout.pie()
.sort(null)
.value(function(d) { return d.population; });
//append svg to body
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width/2 + "," + height/2 + ")");
d3.csv("data.csv", function(error, data) {
var g = svg.selectAll(".arcs")
.data(pie(data))
.enter().append("g")
.attr("class", function (d, i) {
return data[i].class; // i is 0-based.
});
// Select all classes named 'pizza' and translate away from center of circle
svg.selectAll('.food')
.attr("transform", function(d) { //set the origin to the center of the arc
//we have to make sure to set these before calling arc.centroid
d.innerRadius = 0;
d.outerRadius = 0;
x = arc.centroid(d)[0];
y = arc.centroid(d)[1];
return "translate(" + x/4 +','+ y/4 + ")"; //this gives us a pair of coordinates like [50, 50]
});
// color fill
g.append("path")
.attr("d", arc)
.style("fill", function(d) { return color(d.data.age); });
// append text
g.append("text")
.attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
.attr("dy", ".35em")
.style("text-anchor", "middle")
.text(function(d) { return d.data.age; });
});
</script>
csv 파일의 // 내용 :
age,population,class
<5,2704659,food
5-13,4499890,food
14-17,2159981,food
18-24,3853788,icecream
25-44,14106543,icecream
45-64,8819342,pizza
≥65,612463,pizza