D3.js については
D3.js Data-Driven Documents
（http://d3js.org/）
に次のようにあります。
D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.
D3.js は、データに基づいてドキュメントを操作するための JavaScript ライブラリです。 D3 は、HTML、SVG、およびCSSを使用して世の中ににデータを持ち込むのに役立ちます。 Web 標準についての D3 の重点は、独自のフレームワークに束縛されることなく、強力な視覚化コンポーネントとデータ駆動型のアプローチをDOM操作に組み合わせることで、最近のブラウザの全機能を提供します。
「2106-ol3ex.js」
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.Stamen({
/** ol.source.Stamen
* Layer source for the Stamen tile server.
* Stamen タイルサーバのレイヤソース。（ol3 API）
* （2 - ol3ex 24b - Stamen example 1 参照）
*/
layer: 'watercolor'
})
})
],
target: 'map',
view: new ol.View({
center: ol.proj.transform([-97, 38], 'EPSG:4326', 'EPSG:3857'),
zoom: 4
})
});
/** * Load the topojson data and create an ol.layer.Image for * that data. * topojson データをロードし、そのデータの ol.layer.Image を作 * 成します。 */
// d3.json('data/topojson/us.json', function(error, us) {
d3.json('v3.4.0/examples/data/topojson/us.json', function(error, us) {
/** d3.json(url[, callback])
* Creates a request for the JSON file at the specified
* url with the mime type "application/json". If a callback
* is specified, the request is immediately issued with the
* GET method, and the callback will be invoked
* asynchronously when the file is loaded or the request
* fails; the callback is invoked with two arguments: the
* error, if any, and the parsed JSON. The parsed JSON is
* undefined if an error occurs. If no callback is
* specified, the returned request can be issued using
* xhr.get or similar, and handled using xhr.on.
* MIMEタイプ "application/json" と指定された URL に JSON ファ
* イルの要求を作成します。コールバックが指定されている場合、
* 要求はすぐに GET メソッドを使用して発行され、ファイルがロー
* ドまたは要求が失敗したされたときにコールバックが非同期的に
* 呼び出されます。コールバックは２つの引数、エラー、もしあれ
* ば、解析されたJSONを使って呼び出されます。エラーが発生した
* 場合、解析された JSON が定義されません。コールバックが指定
* されていない場合、返された要求は xhr.get または類似のもの
* を使用して発行し、xhr.on.を使用して処理することができます。
* （mbostock/d3[https://github.com/mbostock/d3/wiki/
* Requests#d3_json]）
*/
var features = topojson.feature(us, us.objects.counties);
/**
* This function uses d3 to render the topojson features to a canvas.
* @param {ol.Extent} extent Extent.
* @param {number} resolution Resolution.
* @param {number} pixelRatio Pixel ratio.
* @param {ol.Size} size Size.
* @param {ol.proj.Projection} projection Projection.
* @return {HTMLCanvasElement}
*/
/** 「@param」 * The @param tag provides the name, type, and * description of a function parameter. * The @param tag requires you to specify the name of * the parameter you are documenting. You can also * include the parameter's type, enclosed in curly * brackets, and a description of the parameter. * @paramタグは、関数パラメータの名前と型、説明を提供します。 * @paramタグを使用すると、文書化されたパラメータの名前を * 指定する必要があります。また、パラメータのタイプと、中括弧 * で囲まれたおよびパラメータの説明を含めることができます。 * （@use JSDoc [http://usejsdoc.org/tags-param.html]） */
/** @return（@returns と同義） * The @returns tag documents the value that a function * returns. * @returns タグは、関数が返す値について説明します。 * （@use JSDoc [http://usejsdoc.org/tags-returns..html]） */
var canvasFunction = function(extent, resolution, pixelRatio,
size, projection) {
var canvasWidth = size[0];
var canvasHeight = size[1];
var canvas = d3.select(document.createElement('canvas'));
/** d3.select(node)
* Selects the specified node. This is useful if you
* already have a reference to a node, such as
* d3.select(this) within an event listener, or a
* global such as document.body. This function does
* not traverse the DOM.
* 指定されたノードを選択します。イベントリスナー内の
* d3.select（this）のようなノード、または、document.body
* のようなグローバルへの参照をすでに持っている場合に便利です。
* この関数は、DOMをトラバースすることはありません。
* （mbostock/d3[https://github.com/mbostock/d3/wiki/
* Selections#d3_select]）
*/
canvas.attr('width', canvasWidth).attr('height', canvasHeight);
/** selection.attr(name[, value])
* If value is specified, sets the attribute with the
* specified name to the specified value on all selected
* elements. If value is a constant, then all elements
* are given the same attribute value; otherwise, if
* value is a function, then the function is evaluated
* for each selected element (in order), being passed
* the current datum d and the current index i, with the
* this context as the current DOM element. The
* function's return value is then used to set each
* element's attribute. A null value will remove the
* specified attribute.
* If value is not specified, returns the value of the
* specified attribute for the first non-null element in
* the selection. This is generally useful only if you
* know that the selection contains exactly one element.
* 値が指定されている場合、選択されたすべての要素で指定された名
* 前の属性を指定した値に設定します。値が一定である場合、それに
* より、すべての要素は同一の属性値が与えられます。それに対し、
* 値が関数である場合、それにより、現在の DOM 要素としてこのコ
* ンテキストで、現在のデータ d と現在のインデックス i を渡され、
* 関数が選択した各要素に対して（順番に）評価されます。関数の戻
* り値は、それにより、各要素の属性を設定するために使用されます。
* null 値は、指定された属性を削除します。
* 値が指定されていない場合、選択範囲の最初の非 null 要素に対し
* て指定された属性の値を返します。これは、選択が正確に一つの要
* 素が含むことを知っている場合にのみ、一般的に有用です。
* （mbostock/d3[https://github.com/mbostock/d3/wiki/
* Selections#attr]）
*/
var context = canvas.node().getContext('2d');
/** selection.node()
* Returns the first non-null element in the current
* selection. If the selection is empty, returns null.
* 現在の選択の最初の null 以外の要素を返します。選択が空の場
* 合、null を返します。
* （mbostock/d3[https://github.com/mbostock/d3/wiki/
* Selections#node]）
*/
/** HTMLCanvasElement.getContext() * The HTMLCanvasElement.getContext() method returns a * drawing context on the canvas, or null if the context * identifier is not supported. * HTMLCanvasElement.getContext（）メソッドは、キャンバス上の * 描画コンテキストを返すか、または コンテキスト識別子がサポー * トされていない場合、null を返します。。 * （MDN[https://developer.mozilla.org/en-US/docs/Web/API/ * HTMLCanvasElement/getContext]） */
var d3Projection = d3.geo.mercator().scale(1).translate([0, 0]); /** d3.geo.mercator() * The spherical Mercator projection is commonly used * by tiled mapping libraries (such as OpenLayers and * Leaflet). For an example displaying raster tiles * with the Mercator projection, see the d3.geo.tile * plugin. It is conformal; however, it introduces * severe area distortion at world scale and thus is * not recommended for choropleths. * 球状メルカトル図法は、一般的に（OpenLayers や Leaflet のよ * うな）タイルマッピング·ライブラリで使用されます。メルカトル * 図法でラスタタイルを表示する例では、d3.geo.tile プラグインを * 参照してください。これは、正角（図法）です。しかし、世界全体 * （の表示）では地域の激しい歪みが導入され、したがって、階級区 * 分図には推奨しません。 * （mbostock/d3[https://github.com/mbostock/d3/wiki/ * Geo-Projections#mercator]） */
/** projection.scale([scale]) * If scale is specified, sets the projection’s scale * factor to the specified value and returns the * projection. If scale is not specified, returns the * current scale factor which defaults to 150. The * scale factor corresponds linearly to the distance * between projected points. However, scale factors * are not consistent across projections. * スケールが指定されている場合、投影のスケール係数を指定した * 値に設定し、投影を返します。スケールが指定されていない場合、 * スケール係数は、デフォルト値150の現在のスケール係数を返しま * す。スケール係数は、投影点の間の距離に直線的に対応します。 * しかしながら、スケール係数は、投影全体に一貫していません。 * （mbostock/d3[https://github.com/mbostock/d3/wiki/ * Geo-Projections#scale]） */
/** projection.translate([point]) * If point is specified, sets the projection’s * translation offset to the specified two-element * array [x, y] and returns the projection. If point * is not specified, returns the current translation * offset which defaults to [480, 250]. The * translation offset determines the pixel coordinates * of the projection’s center. The default translation * offset places ⟨0°,0°⟩ at the center of a 960×500 * area. * ポイントが指定されている場合、指定された2つの要素の配列 * [X、Y]に投影の変換オフセットを設定し、投影を返します。ポイ * ントが指定されていない場合、デフォルト値[480、250]の現在の * 変換オフセットを返します。オフセット変換は、投影中央のピク * セル座標を決定します。デフォルトの変換オフセットは、 * 960×500 の領域の中央に（0°、0°)を配置します。 * （mbostock/d3[https://github.com/mbostock/d3/wiki/ * Geo-Projections#translate]） */
var d3Path = d3.geo.path().projection(d3Projection); /** d3.geo.path() * Creates a new geographic path generator with the * default settings: the albersUsa projection and a point * radius of 4.5 pixels. * albersUsa投影（訳注：アラスカからハワイまで米国全土を表示す * る複合東映）と 4.5 ピクセルのポイント半径のデフォルトの設定 * で新しい地理パスジェネレータを作成します。 * （mbostock/d3[https://github.com/mbostock/d3/wiki/ * Geo-Paths#path]） */
/** path.projection([projection]) * If projection is specified, sets the projection * used by the path generator to the specified * projection function. If projection is not * specified, returns the current projection, which * defaults to albersUsa. The projection is typically * one of D3's built-in geographic projections; * however, any function can be used. A projection * function takes a two-element array of numbers * representing the coordinates of a location, * [longitude, latitude], and returns a similar * two-element array of numbers representing the * projected pixel position [x, y]. * 投影が指定されている場合、指定された投影関数にパスジェネレー * タで使用される投影を設定します。投影が指定されていない場合、 * albersUsa のデフォルト値である現在の投影を返します。投影は、 * 通常、D3の組み込みの地理的投影の一つです。しかしながら、すべ * ての関数を用いることができます。投影関数は、場所、[経度、緯 * 度]の座標を表す数字の2つの要素の配列を受け取り、投影ピクセル * 位置[x、y]を表す数字の類似した2つの要素の配列を返します。 * （mbostock/d3[https://github.com/mbostock/d3/wiki/ * Geo-Paths#path_projection]） */
var pixelBounds = d3Path.bounds(features); /** path.bounds(feature) * Computes the projected bounding box (in pixels) for * the specified feature. This is handy for, say, * zooming in to a particular feature. This method * observes any clipping and resampling performed by * the projection stream. * 指定されたフィーチャのために投影されたバウンディングボックス * （ピクセル単位）を計算します。これは、特定のフィーチャへの * ズーミングに、本当に、便利です。この方法は、投影ストリームに * よって実行されるすべてのクリッピングと再サンプリングを観察し * ます。 * （mbostock/d3[https://github.com/mbostock/d3/wiki/ * Geo-Paths#path_bounds]） */
var pixelBoundsWidth = pixelBounds[1][0] - pixelBounds[0][0]; var pixelBoundsHeight = pixelBounds[1][1] - pixelBounds[0][1];
var geoBounds = d3.geo.bounds(features); /** d3.geo.bounds(feature) * Returns the spherical bounding box for the * specified feature. The bounding box is represented * by a two-dimensional array: [[left, bottom], * [right, top]], where left is the minimum longitude, * bottom is the minimum latitude, right is maximum * longitude, and top is the maximum latitude. * 指定されたフィーチャの球形のバウンディングボックスを返しま * す。バウンディングボックスは、二次元配列により表されます： * [左、下]、[右、上]]は、左が最小経度、下が最小緯度、右が最大 * 経度、上が最大緯度です。 * （mbostock/d3[https://github.com/mbostock/d3/wiki/ * Geo-Paths#bounds]） */
var geoBoundsLeftBottom = ol.proj.transform(
geoBounds[0], 'EPSG:4326', projection);
var geoBoundsRightTop = ol.proj.transform(
geoBounds[1], 'EPSG:4326', projection);
var geoBoundsWidth = geoBoundsRightTop[0] - geoBoundsLeftBottom[0];
if (geoBoundsWidth < 0) {
geoBoundsWidth += ol.extent.getWidth(projection.getExtent());
/** ol.extent.getWidth(extent)
* Return: Width.（ol3 API）
*/
/** getExtent()
* Get the validity extent for this projection.
* この投影の有効範囲を取得。（ol3 API）
*/
}
var geoBoundsHeight = geoBoundsRightTop[1] - geoBoundsLeftBottom[1]; var widthResolution = geoBoundsWidth / pixelBoundsWidth; var heightResolution = geoBoundsHeight / pixelBoundsHeight;
var r = Math.max(widthResolution, heightResolution); /** Math.max() * 引数として与えた複数の数の中で最大の数を返します。 * （MDN [https://developer.mozilla.org/ja/docs/Web/ * JavaScript/Reference/Global_Objects/Math/max]） */
var scale = r / (resolution / pixelRatio);
var center = ol.proj.transform(ol.extent.getCenter(extent), projection, 'EPSG:4326'); /** ol.extent.getCenter(extent) * Name: extent, Type: ol.Extent, Description: Extent * Return: Center.（ol2 API） */
d3Projection.scale(scale).center(center) .translate([canvasWidth / 2, canvasHeight / 2]); /** projection.center([location]) * If center is specified, sets the projection’s center * to the specified location, a two-element array of * longitude and latitude in degrees and returns the * projection. If center is not specified, returns the * current center which defaults to ⟨0°,0°⟩ * センターが指定されている場合、度単位の経度と緯度の2つの要素 * の配列に指定された場所に投影の中心部を設定し、投影を返しま * す。センターが指定されていない場合、デフォルト値（0°, 0°） * の現在の中心を返します。 * （mbostock/d3[https://github.com/mbostock/d3/wiki/ * Geo-Paths#center]） */
d3Path = d3Path.projection(d3Projection).context(context); /** path.context([context]) * If context is specified, sets the render context and * returns the path generator. If the context is null, * then the path generator will return an SVG path * string when invoked on a given feature. If the * context is non-null, the path generator will instead * call methods on the specified context to render * geometry. * コンテキストが指定されている場合、レンダリングコンテキストを * 設定し、パスジェネレータを返します。コンテキストが null の * 場合、与えられたフィーチャに対して呼び出さたときに、パスジェ * ネレータは、SVG パスストリングを返します。コンテキストが * null 以外の場合、パスジェネレータは、代わりにジオメトリをレ * ンダリングするために指定されたコンテキストでメソッドを呼び出 * します。 * （mbostock/d3[https://github.com/mbostock/d3/wiki/ * Geo-Paths#path_context]） */
d3Path(features);
context.stroke(); /** CanvasRenderingContext2D.stroke() * The CanvasRenderingContext2D.stroke() method of the * Canvas 2D API strokes the current or given path with * the current stroke style using the non-zero winding * rule. * Canvas 2D APIのCanvasRenderingContext2D.stroke（） * メソッドは、ノンゼロワインディング規則を使用して、現在 * の線のスタイルを持つ現在または与えられたパスを引きます。 * （MDN[https://developer.mozilla.org/en-US/docs/Web/ * API/CanvasRenderingContext2D/stroke]） */
return canvas[0][0]; };
var layer = new ol.layer.Image({
source: new ol.source.ImageCanvas({
/** ol.source.ImageCanvas
* Base class for image sources where a canvas element
* is the image.
* キャンバスエレメントが画像の画像ソースのベースクラス。
* （ol3 API）
*/
canvasFunction: canvasFunction,
projection: 'EPSG:3857'
})
});
map.addLayer(layer); /** addLayer(layer) * Adds the given layer to the top of this map. * 与えられたレイヤをこのマップの一番上に追加します。（ol3 API） */
});
0 件のコメント:
コメントを投稿