【d3.js / v5】SVGで曲線(Path)を描く基本

Path

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スプライン補間
.curveNaturalNutural カーブスプライン補間
.curveMonotoneX3次スプライン補間(x方向)
.curveMonotoneY3次スプライン補間(y方向) 
.curveStepステップ(中央)
.curveStepAfterステップ(終点)
.curveStepBeforeステップ(始点) 
.curveBasisOpenスプライン補間
.curveCardinalOpenカーディナルスプライン補間
.curveCatmullRomOpenCatmull-Romスプライン補間
.curveLinearClosed線形補間
.curveBasisClosedスプライン補間
.curveCardinalClosedカーディナルスプライン補間
.curveCatmullRomClosedCatmull-Romスプライン補間
.curveBundle階層補間

まとめ

3d.js(v5)で線(Path)を描く方法でした。

関連情報

タグ:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA