私は `D3ライブラリに基づく図面をjavascriptで作成しようとしています。私は楕円形の多くの例を見ましたが、8つの部分に分かれていませんでした。私はこれを見つけましたが、私のために新しいものを作ることは難しいです。Javascript D3に基づく8つの部分でSVG分割に基づいて楕円オブジェクトを作成するにはどうすればよいですか？
enter code here
アイデアはperimiter周り失敗のステータスを持っているセクションに別の色を識別したり、置くデータテーブルに基づいています。
例IMG：
あなたは標準d3.arcを使用して円弧を描き、それは楕円として表示させるために、コンテナを拡張することができます
<!DOCTYPE html>
<html>
<head>
<script data-require="[email protected]" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<script>
var svg = d3.select('body')
.append('svg')
.attr('width', 500)
.attr('height', 300)
.append('g')
.attr('transform', 'translate(250,150)scale(1.6,1)');
var step = (2 * Math.PI)/8,
data = d3.range(0, 2 * Math.PI , step).map(function(d){
return {
s: d,
e: d + step,
f: Math.random() > 0.5 ? true : false
};
});
svg.selectAll("path")
.data(data)
.enter()
.append("path")
.attr("d", function(d){
return d3.arc()({
innerRadius: 0,
outerRadius: 150,
startAngle: d.s,
endAngle: d.e
});
})
.style("fill", function(d,i){
return d.f ? "red" : "gray";
})
.style("stroke", "black");
</script>
</body>
</html>