D 3ノート2:SVG、Canvas、キャンバス、矩形、塗りつぶし図形

3187 ワード
D 3ノート
  • キャンバスは何の前章の処理対象がHTMLの文字で、図形の作成には触れていません.絵を描くには、まず絵を描くキャンバスが必要です.HTML 5は、SVGとCanvasの2つの強力な「キャンバス」を提供します.
  • SVGとは、スケーラブルベクトルグラフィックス(Scalable VectorGraphics)を意味するSVGの一種であり、2次元ベクトルグラフィックスを記述するためのグラフィックフォーマットであり、万次元ネットワーク連盟によって制定されたオープンスタンダードである.SVGはXML形式でグラフィックを定義する.IE 8以前のバージョンを除いて、ほとんどのブラウザはSVGをサポートしており、SVGテキストをHTMLに直接埋め込んで表示することができます.SVGの特徴:
  • SVGはベクトル図を描いているので、画像を拡大しても歪みはありません.
  • XMLベースで、各要素にJavaScriptイベントプロセッサを追加できます.
  • 各グラフィックはオブジェクトとみなされ、オブジェクトのプロパティを変更できます.もちろん、グラフィックも変更されます.
  • はゲームアプリケーションに適していません.

  • Canvasとは何ですかCanvasはJavaScriptで2 Dグラフィックを描き、HTML 5に新たに追加された要素です.Canvasの特徴:
  • はビットマップで、画像が拡大すると歪みます.
  • はイベントプロセッサをサポートしていません.
  • は.pngまたは.jpg形式で画像を保存します.
  • はゲームアプリケーションに適しています.

  • キャンバスD 3を追加するには、SVGで必ず描画するという明示的な規定はありませんが、D 3は、SVGのみをサポートする多くのSVGグラフィックのジェネレータを提供しています.そのため、SVGキャンバスを使うことをお勧めします.D 3を使用してbody要素にsvgを追加するコードは、
    var width = 300;  //     
var height = 300;   //     

var svg = d3.select("body")     //      body  
    .append("svg")              //    svg  
    .attr("width", width)       //    
    .attr("height", height);    //
    にキャンバスがあり、次にキャンバスに図を描くことができます.
  • はSVGに長方形を描画し、長方形の要素ラベルはである.たとえば、
    <svg>
    <rect>rect>
    <rect>rect>
svg>
    の上のrectには矩形の属性はありません.長方形のプロパティ.
  • x:矩形左上角のx座標;
  • y:矩形左上角のy座標;
  • width:矩形の幅
  • height:矩形の高さ
    • なお、SVGでは、x軸の正方向は水平右、y軸の正方向は垂直下である.
  • 十分な数のグラフィックを埋め込むこのコードはdataset配列の長さと同じ数の矩形を追加し、
    svg.selectAll("rect")   //   svg      
    .data(dataset)      //     
    .enter()            //       enter  
    .append("rect");    //
    にデータがあり、十分なグラフィック要素がない場合、この方法を使用して十分な要素を追加することができます.
    • promise:promiseの3つの状態とチェーン呼び出しを深く理解する
    これは朝からの手記です