3d.js(v5)で線（Path）を描くためのSVG（Scalable Vector Graphics）入門です。サンプルで曲線を描いてみます。
目次
HTML/JavaScriptサンプル
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>D3 SVG Path</title>
<script src="d3.min.js"></script>
<style>
h1{
font-size: small;
font-family: "Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
}
svg{
font: 12px sans-serif;
background-color: #eee;
text-align: right;
padding: 3px;
margin: 1px;
color: #333;
}
</style>
</head>
<body>
<h1>d3.js SVG Path</h1>
<script>
// SVG領域の設定
var width = 600; // グラフの幅
var height = 400; // グラフの高さ
// Pathの座標データ
var data = [{x: 0, y: 20},
{x: 150, y: 250},
{x: 300, y: 200},
{x: 450, y: 20},
{x: 600, y: 380}]
// SVG設定
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
// line作成関数
var curveFunc = d3.line()
.curve(d3.curveBasis) // curveメソッドで線の形を変更
.x(function(d) { return d.x })
.y(function(d) { return d.y })
// Path追加
svg.append('path')
.attr('d', curveFunc(data))
.attr('stroke', '#333')
.attr('fill', 'none');
</script>
</body>
</html>
Pathを追加
曲線を描画するにはPathタグ設定して、SVGに追加します。
// 曲線作成関数
var curveFunc = d3.line()
.curve(d3.curveBasis) // curveメソッドで線の形を変更
.x(function(d) { return d.x })
.y(function(d) { return d.y })
// Path追加
svg.append('path')
.attr('d', curveFunc(data)) // 曲線作成関数を呼び出す
.attr('stroke', '#333') // 線の色
.attr('fill', 'none'); // 塗りつぶし色
d3.line()メソッドを.curve()メソッドで線の形を変更することができます。
| .curveLinear | デフォルトと同じ |
| .curveBasis | データ点間をスプライン補間 |
| d3.curveCardinal(α) | αは0から1の値で曲がり具合を設定 ・0の場合: デフォルトのd3.curveCatmullRom ・1の場合: d3.curveLinearと一致 ・αのデフォルト：0 |
| .curveCatmullRom.alpha(α) | Catmull-Romスプライン補間 |
| .curveNatural | Nutural カーブスプライン補間 |
| .curveMonotoneX | ３次スプライン補間(x方向) |
| .curveMonotoneY | ３次スプライン補間(y方向) |
| .curveStep | ステップ(中央) |
| .curveStepAfter | ステップ(終点) |
| .curveStepBefore | ステップ(始点) |
| .curveBasisOpen | スプライン補間 |
| .curveCardinalOpen | カーディナルスプライン補間 |
| .curveCatmullRomOpen | Catmull-Romスプライン補間 |
| .curveLinearClosed | 線形補間 |
| .curveBasisClosed | スプライン補間 |
| .curveCardinalClosed | カーディナルスプライン補間 |
| .curveCatmullRomClosed | Catmull-Romスプライン補間 |
| .curveBundle | 階層補間 |
まとめ
3d.js(v5)で線（Path）を描く方法でした。
関連情報
リンク
リンク
リンク
