「raster.js（2125-ol3ex.js）」は、マップを表示するための JavaScript ファイルです。
「2125-ol3ex.js」
var minVgi = 0;
var maxVgi = 0.25;
var bins = 10;
/**
* Calculate the Vegetation Greenness Index (VGI) from an
* input pixel. This is a rough estimate assuming that pixel
* values correspond to reflectance.
* 植生緑指数（VGI）は入力画素から計算されます。
* これは、画素値が反射率に対応すると仮定する概算です。
* @param {ol.raster.Pixel} pixel An array of [R, G, B, A] values.
* @return {number} The VGI value for the given pixel.
*/
/** 「@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]）
*/
function vgi(pixel) {
var r = pixel[0] / 255;
var g = pixel[1] / 255;
var b = pixel[2] / 255;
return (2 * g - r - b) / (2 * g + r + b);
}
/**
* Summarize values for a histogram.
* @param {numver} value A VGI value.
* @param {Object} counts An object for keeping track of VGI counts.
*/
function summarize(value, counts) {
var min = counts.min;
/** Math.min()
* 引数として与えた複数の数の中で最小の数を返します。
* （MDN[https://developer.mozilla.org/ja/docs/Web/
* JavaScript/Reference/Global_Objects/Math/min]）
*/
var max = counts.max;
/** Math.max()
* 引数として与えた複数の数の中で最大の数を返します。
* （MDN[https://developer.mozilla.org/ja/docs/Web/
* JavaScript/Reference/Global_Objects/Math/max]）
*/
var num = counts.values.length;
/** Array.length
* 配列の要素数を表す符号なし 32 ビット整数。
* （MDN[https://developer.mozilla.org/ja/docs/Web/
* JavaScript/Reference/Global_Objects/Array/length]）
*/
if (value < min) {
// do nothing
} else if (value >= max) {
counts.values[num - 1] += 1;
} else {
var index = Math.floor((value - min) / counts.delta);
/** Math.floor()
* The Math.floor() function returns the largest
* integer less than or equal to a given number.
* Math.floor() 関数は、指定された数以下の最大の整数、
* または、等しい数を返します。
* （MDN[https://developer.mozilla.org/en-US/docs/Web/
* JavaScript/Reference/Global_Objects/Math/floor]）
*/
counts.values[index] += 1;
}
}
/**
* Use aerial imagery as the input data for the raster source.
*/
var bing = new ol.source.BingMaps({
/** ol.source.BingMaps
* Layer source for Bing Maps tile data.
* Bing Maps タイルデータのレイヤソース。（ol3 API）
*/
key: 'Ak-dzM...（省略）',
imagerySet: 'Aerial'
});
/**
* Create a raster source where pixels with VGI values above
* a threshold will be colored green.
* しきい値以上の VGI 値を持つ画素が緑色に着色されたラスタ·ソー
* スを作成します。
*/
var raster = new ol.source.Raster({
/** ol.source.Raster
* A source that transforms data from any number of input
* sources using an array of ol.raster.Operation functions
* to transform input pixel values into output pixel values.
* 入力画素値を出力画素値に変換するために ol.raster.Operation
* 関数の配列を使用して、任意の数の入力ソースからデータを変換する
* ソース。
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
sources: [bing],
operation:
/** operation
* Raster operation. The operation will be called with data
* from input sources and the output will be assigned to
* the raster source.
* ラスタオペレーション。operation は入力ソースからデータととも
* に呼び出され、出力データはラスタ·ソースに割り当てられます。
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
function(pixels, data) {
var pixel = pixels[0];
var value = vgi(pixel);
summarize(value, data.counts);
if (value >= data.threshold) {
pixel[0] = 0;
pixel[1] = 255;
pixel[2] = 0;
pixel[3] = 128;
} else {
pixel[3] = 0;
}
return pixel;
},
lib: {
/** lib
* Functions that will be made available to operations
* run in a worker.
* ワーカで実行される operation が利用可能となる関数。
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
vgi: vgi,
summarize: summarize
}
});
raster.set('threshold', 0.1);
/** set(key, Value)
* Sets a value.
* 値を設定します。
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
function createCounts(min, max, num) {
var values = new Array(num);
/** Array(arraylength)
* JavaScript は配列を扱うことができます。配列とは順序を持つ複
* 数のデータの集合であり、JavaScript のグローバルオブジェクト
* である Array は、高位の、（C言語等で云うところの）「リス
* ト」の様な、配列のコンストラクタです。
* arraylength
* Array コンストラクタに渡される唯一の引数（arrayLength）に
* 0 から 4,294,967,295( 232-1 ) までの整数値を指定する場合
* その値を要素数とする配列が作成されます。その際に範囲外の値
* は、を指定した場合には、例外: RangeError がスローされます。
* （MDN[https://developer.mozilla.org/ja/docs/Web/
* JavaScript/Reference/Global_Objects/Array]）
*/
for (var i = 0; i < num; ++i) {
values[i] = 0;
}
return {
min: min,
max: max,
values: values,
delta: (max - min) / num
};
}
raster.on('beforeoperations', function(event) {
/** on(type, listener, opt_this)
* Listen for a certain type of event.
* あるタイプのイベントをリッスンします。（ol3 API）
*/
event.data.counts = createCounts(minVgi, maxVgi, bins);
event.data.threshold = raster.get('threshold'); /** get(key)
* Gets a value. 値を取得します。（ol3 API）
*/
});
raster.on('afteroperations', function(event) {
schedulePlot(event.resolution, event.data.counts, event.data.threshold);
});
var map = new ol.Map({
layers: [
new ol.layer.Tile({
/** ol.layer.Tile
* For layer sources that provide pre-rendered, tiled
* images in grids that are organized by zoom levels for
* specific resolutions.
* プリレンダリング（事前描画）を提供するレイヤソースのための、
* 特定の解像度でのズームレベルによって編成されているグリッドの
* タイルイメージ。（ol3 API）
*/
source: bing
}),
new ol.layer.Image({
/** ol.layer.Image
* Server-rendered images that are available for arbitrary
* extents and resolutions.
* 任意の範囲と解像度で利用可能な server-rendered イメージ。
* （ol3 API）
*/
source: raster
})
],
target: 'map',
view: new ol.View({
center: [-9651695, 4937351],
zoom: 13,
minZoom: 12,
maxZoom: 19
})
});
var timer = null;
function schedulePlot(resolution, counts, threshold) {
if (timer) {
clearTimeout(timer);
/** Window.clearTimeout(timeoutID)
* window.setTimeout() によって設定された遅延を解除します。
* timeoutID は、解除したいタイマの ID です。ID は、
* window.setTimeout() の戻り値によって取得できます。
* （MDN[https://developer.mozilla.org/ja/docs/Web/
* API/WindowTimers/clearTimeout]）
*/
timer = null;
}
timer = setTimeout(plot.bind(null, resolution, counts, threshold), 1000 / 60);
/** setTimeout(func, dylay)
* 指定された遅延の後に、コードの断片または関数を実行します。
* func : delay ミリ秒後に実行したい関数。
* delay : 関数呼び出しを遅延させるミリ秒(1/1000 秒)。
* （MDN[https://developer.mozilla.org/ja/docs/Web/
* API/Window/setTimeout]）
*/
/** Function.prototype.bind()
* bind() メソッドは、呼び出された時に新しい関数を生成しま
* す。最初の引数 thisArg は新しい関数の this キーワード
* にセットされます。2 個目以降の引数は、新しい関数より前に、
* ターゲット関数の引数として与えられます。
* （下記ページ内「setTimeout とともに」も参照してください。）
* （MDN[https://developer.mozilla.org/ja/docs/Web/
* JavaScript/Reference/Global_Objects/Function/bind]）
*/
}
var barWidth = 15;
var plotHeight = 150;
var chart = d3.select('#plot').append('svg')
/** 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]）
*/
/** selection.append(name)
* Appends a new element with the specified name as
* the last child of each element in the current
* selection, returning a new selection containing
* the appended elements. Each new element inherits
* the data of the current elements, if any, in the
* same manner as select for subselections.
* The name may be specified either as a constant
* string or as a function that returns the DOM
* element to append. When the name is specified as
* a string, it may have a namespace prefix of the
* form "namespace:tag". For example, "svg:text"
* will create a "text" element in the SVG namespace.
* By default, D3 supports svg, xhtml, xlink, xml
* and xmlns namespaces. Additional namespaces can
* be registered by adding to d3.ns.prefix. If no
* namespace is specified, then the namespace will
* be inherited from the enclosing element; or, if
* the name is one of the known prefixes, the
* corresponding namespace will be used (for example,
* "svg" implies "svg:svg").
* 追加された要素を含む新しい selection を返すとき、現在
* の selection に各要素の最後の子として指定された名前を
* 持つ新しい要素を追加します。新しい各要素は、もしあれば、
* サブセレクションのための選択と同じ方法で、現在の要素の
* データを継承します。
* 名前は文字列定数として、または追加する DOM 要素を返す関
* 数として指定することができます。名前が文字列として指定さ
* れた場合は、「namespace:tag」フォームの名前空間接頭
* 辞を持ちます。たとえば、「svg:text」は、SVG 名前空間
* に「text」要素を作成します。デフォルトでは、D3は、svg、
* xhtml、xlink、xml、xmlns 名前空間をサポートしていま
* す。追加の名前空間は d3.ns.prefix に追加することに
* よって登録することができます。名前空間が指定されていな
* い場合、名前空間は、外側の要素から継承されます。または、
* 名前が既知の接頭辞の一つである場合、対応する名前空間が
* 使用されます（例えば、「svg」は「svg：svg」を意味し
* ます）。
* （mbostock/d3[https://github.com/mbostock/d3/wiki/
* Selections#append]）
*/
.attr('width', barWidth * bins)
/** 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 値は、指定された属性を削除します。
* 値が指定されていない場合、その selection で最初の非 null
* 要素に対して指定された属性の値を返します。これは、
* selection が正確に一つの要素が含むことを知っている場合にの
* み、一般的に有用です。
* （mbostock/d3[https://github.com/mbostock/d3/wiki/
* Selections#attr]）
*/
.attr('height', plotHeight);
var chartRect = chart[0][0].getBoundingClientRect();
/** Element.getBoundingClientRect()
* The Element.getBoundingClientRect() method returns
* the size of an element and its position relative to
* the viewport.
* Element.getBoundingClientRect（）メソッドは、要素の
* サイズとビューポートに対するその位置を返します。
* （MDN[https://developer.mozilla.org/en-US/docs/Web/
* API/Element/getBoundingClientRect]）
*/
var tip = d3.select(document.body).append('div')
.attr('class', 'tip');
function plot(resolution, counts, threshold) {
var yScale = d3.scale.linear()
/** d3.scale.linear()
* Constructs a new linear scale with the default
* domain [0,1] and the default range [0,1]. Thus,
* the default linear scale is equivalent to the
* identity function for numbers; for example
* linear(0.5) returns 0.5.
* デフォルトのドメイン[0,1]とデフォルトの範囲[0,1]で
* 新しいリニアスケールを構築します。このように、デフォ
* ルトのリニアスケールは数字の identity 関数と同等で
* す。例えば、リニア（0.5）は 0.5 を返します。
* （mbostock/d3[https://github.com/mbostock/d3/wiki/
* Quantitative-Scales#linear]）
*/
.domain([0, d3.max(counts.values)])
/** linear.domain([numbers])
* If numbers is specified, sets the scale's input
* domain to the specified array of numbers. The
* array must contain two or more numbers. If the
* elements in the given array are not numbers, they
* will be coerced to numbers; this coercion happens
* similarly when the scale is called. Thus, a linear
* scale can be used to encode types such as date
* objects that can be converted to numbers; however,
* it is often more convenient to use d3.time.scale
* for dates. (You can implement your own convertible
* number objects using valueOf.) If numbers is not
* specified, returns the scale's current input domain.
* 数字が指定されている場合は、スケールの入力ドメインは、
* 数字の指定した配列に設定します。配列は、二つ以上の数字
* が含まれている必要があります。指定された配列内の要素
* が数字でない場合は、数字に強制変換されます。スケールが
* 呼び出されたときに、この強制は、同様に発生します。従っ
* て、リニアスケールは、そのような数字に変換することがで
* きる日付オブジェクトのような型をエンコードするために使
* 用することができます。しかし、それは日付に
* d3.time.scale を使用すると便利な場合があります。
* （あなたは、valueOf メソッドを使用して、独自のコンバー
* チブルナンバーオブジェクトを実装することができます。）
* 数字が指定されていない場合、スケールの現在の入力のドメ
* インを返します。
* （mbostock/d3[https://github.com/mbostock/d3/wiki/
* Quantitative-Scales#linear_domain]）
*/
/** d3.max(array[, accessor])
* Returns the maximum value in the given array using
* natural order. If the array is empty, returns
* undefined. An optional accessor function may be
* specified, which is equivalent to calling array.map
* (accessor) before computing the maximum value.
* Unlike the built-in Math.max, this method ignores
* undefined values; this is useful for computing the
* domain of a scale while only considering the defined
* region of the data. In addition, elements are
* compared using natural order rather than numeric
* order. For example, the maximum of ["20", "3"] is
* "3", while the maximum of [20, 3] is 20.
* 自然な順序を使用して、指定された配列の最大値を返します。
* 配列が空の場合、未定義を返します。オプションのアクセサ関
* 数が指定されますが、それは最大値を計算する前にarray.map
* （アクセサ）を呼び出すのと同じです。組込みの Math.max
* とは異なり、この方法は、未定義の値を無視します。これは、
* データの定義された領域を考慮でけしながら、スケールのドメ
* インを計算するのに便利です。また、要素が数字順ではな
* く自然な順序を使用して比較されます。例えば、["20"、"3"]
* の最大は "3" で、[20 3]最大値は 20 です。
* （mbostock/d3[https://github.com/mbostock/d3/wiki/
* Arrays#d3_max]）
*/
.range([0, plotHeight]);
/** linear.range([values])
* If values is specified, sets the scale's output
* range to the specified array of values. The array
* must contain two or more values, to match the
* cardinality of the input domain, otherwise the
* longer of the two is truncated to match the other.
* The elements in the given array need not be numbers;
* any value that is supported by the underlying
* interpolator will work. However, numeric ranges are
* required for the invert operator. If values is not
* specified, returns the scale's current output range.
* 値が指定されている場合は、指定された値の配列にスケールの
* 出力範囲を設定します。配列は、入力ドメインの基数と一致す
* るように、2つまたはそれ以上の値が含まれている必要があり、
* それ以外の場合は、2つより長いが、他に一致するように切り捨
* てられます。与えられた配列内の要素は数字である必要はなく、
* 基本的な保管回路でサポートされている任意の値が動作します。
* しかし、数値範囲は反転演算子のために必要とされます。値が指
* 定されていない場合、スケールの現在の出力範囲を返します。
* （mbostock/d3[https://github.com/mbostock/d3/wiki/
* Quantitative-Scales#linear_range]）
*/
var bar = chart.selectAll('rect').data(counts.values);
/** d3.selectAll(selector)
* Selects all elements that match the specified
* selector. The elements will be selected in document
* traversal order (top-to-bottom). If no elements in
* the current document match the specified selector,
* returns the empty selection.
* 指定されたセレクタに一致するすべての要素を選択します。要素
* は、document traversal order（上から下）で選択されま
* す。現在のドキュメント内に要素が指定したセレクタに一致しな
* い場合は、empty selection を返します。
* （mbostock/d3[https://github.com/mbostock/d3/wiki/
* Selections#d3_selectAll]）
*/
/** selection.data([values[, key]])
* Joins the specified array of data with the current
* selection. The specified values is an array of data
* values (e.g. numbers or objects), or a function that
* returns an array of values. If a key function is not
* specified, then the first datum in values is
* assigned to the first element in the current
* selection, the second datum to the second selected
* element, and so on. When data is assigned to an
* element, it is stored in the property __data__
* (defined by D3), thus making the data "sticky" so
* that it is available on re-selection.
* The result of the data method is the update
* selection; this represents the selected DOM
* elements that were successfully bound to the
* specified data elements. The update selection also
* contains a reference to the enter and exit
* selections, for adding and removing nodes in
* correspondence with data. The update and enter
* selections are returned in data order and the exit
* selection in document order at the time that the
* selection was queried. For more details, see the
* short tutorial Thinking With Joins.
* 現在の selection とともに指定されたデータの配列を結合し
* ます。指定された値は、データ値（例えば番号またはオブジェ
* クト）の配列、または値の配列を返す関数です。キー関数が指定
* されていない場合は、従って、値の最初のデータは現在の
* selection で最初の要素に、第2のデータが第2の選択された要
* 素にというように、割り当てられます。データが要素に割り当て
* られている場合には、（D3によって定義された）プロパティ
* __data__ に格納され、これにより、それが再選択で手に入る
* ために、データ「sticky」を作成します。データメソッドの結
* 果は update selection です。これは、指定されたデータ要
* 素に正常にバインドされた、選択された DOM 要素を表します。
* update selection は、データに対応してノードの追加や削
* 除のため、enter と exit の selection への参照も同じよ
* うに含まれます。update と enter の selection は、デー
* タの順序で返され、exit selection は、selection が照会
* された時点での文書の順序で返されます。詳細については、短い
* チュートリアル Thinking With Joins を参照してください。
* （mbostock/d3[https://github.com/mbostock/d3/wiki/
* Selections#data]）
*/
bar.enter().append('rect');
/** selection.enter()
* Returns the enter selection: placeholder nodes for
* each data element for which no corresponding
* existing DOM element was found in the current
* selection. This method is only defined on the
* update selection, which is returned by the data
* operator. In addition, the enter selection only
* defines the append, insert, select and call
* operators; you must use these operators to
* instantiate the entering elements before modifying
* any content. Enter selections also support empty
* and size.
* enter selection を返します。該当する既存の DOM 要素
* が現在の選択 （current selection）に見つからなかった
* ために、各データ要素のプレースホルダノード。このメソッド
* は update selection 上に定義され、データの演算子に
* よって返されます。また、enter selection は、append、
* insert、select、および call 演算子を定義します。あ
* なたは、任意のコンテンツを変更する前に、entering 要素
* をインスタンス化するためにこれらの演算子を使用する必要
* があります。enter selection は、空とサイズもサポート
* します。
* （mbostock/d3[https://github.com/mbostock/d3/wiki/
* Selections#enter]）
*/
bar.attr('class', function(count, index) {
var value = counts.min + (index * counts.delta);
return 'bar' + (value >= threshold ? ' selected' : '');
/** 条件演算子 condition ? expr1 : expr2
* condition: true か false かを評価する条件文です。
* expr1, expr2: 各々の値の場合に実行する式です。
* condition が true の場合、演算子は expr1 の値を選択します。
* そうでない場合は expr2 の値を選択します。
* （MDN[https://developer.mozilla.org/ja/docs/Web/
* JavaScript/Guide/Expressions_and_Operators]）
*/
})
.attr('width', barWidth - 2);
bar.transition().attr('transform', function(value, index) {
/** selection.transition([name])
* Starts a transition for the current selection.
* Transitions behave much like selections, except
* operators animate smoothly over time rather than
* applying instantaneously.
* Transitions of the same name are exclusive
* per-element. When the new transition starts on a
* given element, it will interrupt an active
* transition of the same name on the element, if
* any. If a name is not specified, the empty name
* (“”) is used. Note that transitions with a zero
* delay do not start until the next timer tick,
* which is typically about 17ms after scheduling.
* 現在の selection に対して遷移を開始します。オペレータが
* 瞬時に適用するのではなく、時間をかけて滑らかにアニメーショ
* ンするのを除いて、遷移は selection のように動作します。
* 同じ名前の遷移は、排他的要素単位 per-element です。新し
* い遷移が与えられた要素に始まると、その要素で同じ名前の活性
* 遷移（存在する場合）を中断します。名前が指定されてない場
* 合、空の名前（ ""）が使用されます。ゼロ遅延の遷移は、典型
* 的にスケジュール後に約17msの、次のタイマティックまで開始
* されません。
* （mbostock/d3[https://github.com/mbostock/d3/wiki/
* Selections#transition]）
*/
return 'translate(' + (index * barWidth) + ', ' +
(plotHeight - yScale(value)) + ')';
})
.attr('height', yScale);
bar.on('mousemove', function(count, index) {
var threshold = counts.min + (index * counts.delta);
if (raster.get('threshold') !== threshold) {
raster.set('threshold', threshold);
raster.changed();
}
});
bar.on('mouseover', function(count, index) {
/** selection.on(type[, listener[, capture]])
* Adds or removes an event listener to each element
* in the current selection, for the specified type.
* The type is a string event type name, such as
* "click", "mouseover", or "submit". (Any DOM event
* type supported by your browser may be used.) The
* listener is stored by decorating the selected DOM
* elements using the naming convention "__ontype".
* The specified listener is invoked in the same
* manner as other operator functions, being passed
* the current datum d and index i, with the this
* context as the current DOM element. To access the
* current event within a listener, use the global
* d3.event. The return value of the event listener
* is ignored.
* 指定されたタイプのために、現在の selection の各要素に
* イベントリスナを追加または削除します。タイプは、「クリッ
* ク」、「マウスオーバ」、または「サブミット」などの文字列
* のイベントタイプ名です。（ブラウザがサポートしているすべ
* ての DOM イベントタイプを使用できます。）リスナが、命名
* 規則「__ontype」を使用して、選択された DOM 要素を装飾
* することによって保存されます。指定されたリスナは、現在の
* データ d とインデックス i を渡され、現在の DOM 要素とし
* てこのコンテキストとともに、他の演算子関数と同様に呼び出
* されます。リスナ内の現在のイベントにアクセスするには、グ
* ローバル d3.event を使用します。イベントリスナの戻り値
* は無視されます。
* （mbostock/d3[https://github.com/mbostock/d3/wiki/
* Selections#on]）
*/
var area = 0;
for (var i = counts.values.length - 1; i >= index; --i) {
area += resolution * resolution * counts.values[i];
}
tip.html(message(counts.min + (index * counts.delta), area));
/** selection.html([value])
*The html operator is based on the innerHTML
* property; setting the inner HTML content will
* replace any existing child elements. Also, you
* may prefer to use the append or insert operators
* to create HTML content in a data-driven way;
* this operator is intended for when you want a
* little bit of HTML, say for rich formatting.
* html 演算子は、innerHTML プロパティに基づいています。
* inner HTMLコンテンツを設定すると、既存の子要素に置き換
* えられます。同じように、データ駆動型の方法でHTMLコンテン
* ツを作成するために、append または insert 演算子を使用
* を好んで出来ます。少ない HTML で、豊富な書式設定をするた
* めにこの演算子が使用されます。
* （mbostock/d3[https://github.com/mbostock/d3/wiki/
* Selections#html]）
*/
tip.style('display', 'block');
/** selection.style(name[, value[, priority]])
* If value is specified, sets the CSS style property
* with the specified name to the specified value on
* all selected elements. If value is a constant, then
* all elements are given the same style 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 style property. A
* null value will remove the style property. An
* optional priority may also be specified, either as
* null or the string "important" (without the
* exclamation point).
* 値が指定されている場合は、選択したすべての要素で指定され
* た名前のCSSスタイルプロパティを指定した値に設定します。
* 値が一定であれば、すべての要素は同じスタイル値が与えられ
* ています。一方で、値が関数である場合、関数は、現在のデー
* タ d と現在のインデックス i を渡され、現在の DOM 要素と
* してこのコンテキストで（順番に）選択した各要素に対して評
* 価されます。関数の戻り値は、各要素のスタイルプロパティを
* 設定するために使用されます。null 値は、スタイルプロパティ
* を削除します。オプションプロパティのは同じように、null
* または文字列「important」（感嘆符なし）のいずれかを指定
* することができます。
* （mbostock/d3[https://github.com/mbostock/d3/wiki/
* Selections#style]）
*/
tip.transition().style({
left: (chartRect.left + (index * barWidth) + (barWidth / 2)) + 'px',
top: (d3.event.y - 60) + 'px',
opacity: 1
});
});
bar.on('mouseout', function() {
tip.transition().style('opacity', 0).each('end', function() {
/** selection.each(function)
* Invokes the specified function for each element
* in the current selection, passing in the current
* datum d and index i, with the this context of the
* current DOM element. This operator is used
* internally by nearly every other operator, and
* can be used to invoke arbitrary code for each
* selected element. The each operator can be used
* to process selections recursively, by using
* d3.select(this) within the callback function.
* 現在のデータ d と現在のインデックス i を渡し、現在の
* DOM 要素のこのコンテキストで、現在の selection の各
* 要素に対して指定された関数を呼び出します。この演算子は、
* ほぼすべての他の演算子によって内部的に使用され、選択し
* た各要素の任意のコードを呼び出すために使用することがで
* きます。各演算子は、コールバック関数内で
* d3.select(this) を使用して、再帰的に selection
* を処理するために使用することができます。
* （mbostock/d3[https://github.com/mbostock/d3/wiki/
* Selections#each]）
*/
tip.style('display', 'none');
});
});
}
function message(value, area) {
var acres = (area / 4046.86).toFixed(0).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
/** Number.prototype.toFixed()
* The toFixed() method formats a number using fixed-point
* notation.
* toFixed() メソッドは、固定小数点表記を使用して数値をフォー
* マットします。
* （MDN[https://developer.mozilla.org/en-US/docs/Web/
* JavaScript/Reference/Global_Objects/Number/toFixed]）
*/
/** replace [メソッド]
* 指定された URL に現在の文書を置き換えます。 assign() メソッ
* ドとの違いは、replace() を用いた後、現在のページは、セッショ
* ンの履歴には保持されないことです。つまり、ユーザは、置き換え
* 前のページに戻るために、戻るボタンを使うことができません。
* （MDN[https://developer.mozilla.org/ja/docs/Web/API/
* Window/location]）
*/
return acres + ' acres at
' + value.toFixed(2) + ' VGI or above';
}
