日本の貿易収支 1979-2018

.block.md

height: 900 scrolling: no border: yes

Readme.md

日本の貿易収支の可視化

取引額の多い上位10家国を黒字、赤字ごとに取得してプロットしてます。

PCの場合は、左右の(←・→)アローキーでも年代を変更できます。

• 元データは以下から 輸出入額の推移（地域（国）別･主要商品別） : 財務省貿易統計　Trade Statistics of Japan

Africa.csv

all.csv

Asia.csv

createAxis.js

/**
 * @module nChart/createAxis
 * @desc Axis(軸)を生成します。
 * @example
 *var instans = nChart.createAxis()
 *
 *
 *var selector = d3.select(query)
 *  .datum(data)
 *  .call(instans)
 */
!(function() {
  "use strict";
  if (typeof module !== "undefined" && module.exports) {
    module.exports = createAxis;
  } else {
    window.createAxis = createAxis;
  }

  function createAxis() {
    var _chartWidth, _chartHeight;
    var _plotWidth, _plotHeight;

    var _plotMargin = null; //{top:0, left:0, bottom:0, right:0};

    var _x = function() {
        return d;
      },
      _y = function() {
        return d;
      };

    var _leftAxisFlag = true,
      _rightAxisFlag = false,
      _topAxisFlag = false,
      _bottomAxisFlag = true;

    var _xTickLabelFlip = false,
      _yTickLabelFlip = false;

    var _xScale, _yScale;

    var _leftTopLabel, _rightTopLabel, _LeftBottomLabel, _rightBottomLabel;

    var _xAxisGridVisible = false,
      _yAxisGridVisible = false;

    var _xAxisDomainLineVisible = true,
      _yAxisDomainLineVisible = true;

    var _yTicks, _xTicks;

    var _yTickValues, _xTickValues;

    var _yTickPadding, _xTickPadding;

    var _yTickSizeOuter = 7.5,
      _xTickSizeOuter = 7.5;

    var _yTickSize = 8,
      _xTickSize = 8;

    var _yTickFormat = function(d) {
        return d;
      },
      _xTickFormat = function(d) {
        return d;
      };

    var _responsive = true;

    function instance(_selection) {
      _selection.each(function(_data) {
        if (!_selection._enableBindAxis)
          throw new Error(
            "このセレクターにはAxisをバインドすることができません"
          );

        var isHash = function(value) {
          return value.toString() === "[object Object]";
        };

        var isArray =
          Array.isArray ||
          function(value) {
            return value.toString() === "[object Array]";
          };

        var _parentNode = _selection.node();

        //axisモジュールはすでにセレクター内に以下要素が生成されているのが前提
        //parent -> svg element
        var target = _selection._addSvgElement ? "svg" : "g";

        var svg = _selection.selectAll(target);
        var axisLayer = svg.selectAll(".axisLayer");

        var backgroundLayer = svg.selectAll(".backgroundLayer");

        var selectedGridLayer = backgroundLayer
          .selectAll(".gridLayer")
          .data(["dummy"]);
        var newGridLayer = selectedGridLayer
          .enter()
          .append("g")
          .attr("class", "gridLayer");

        var gridLaye = selectedGridLayer.merge(newGridLayer);

        main(_data);

        if (_responsive) setReSizeEvent();

        updateBindSelector(_selection);

        function main(data) {
          //セレクターにバインドされているアクセサを使用する
          _x = _selection._x;
          _y = _selection._y; //セレクターにバインドされているスケールを使用する

          _xScale = _selection._xScale;
          _yScale = _selection._yScale;

          //セレクターにバインドされているマージンを使用する
          _plotMargin = _selection._plotMargin;

          setSize();

          copyScale(_selection);

          //グリッドの表示・非表示
          if (_yAxisGridVisible) renderYAxisGrid();
          if (_xAxisGridVisible) renderXAxisGrid();

          //軸の表示・非表示
          if (_leftAxisFlag) renderLeftYAxis();
          if (_bottomAxisFlag) renderBottomXAxis();
          if (_rightAxisFlag) renderRightYAxis();
          if (_topAxisFlag) renderTopXAxis();

          //ラベルの表示・非表示
          if (_leftTopLabel) renderLeftTopLabel();
          if (_rightTopLabel) renderRightTopLabel();
          if (_LeftBottomLabel) renderLeftBottomLabel();
          if (_rightBottomLabel) renderRightBottomLabel();
        }

        //リサイズ時処理
        function setReSizeEvent() {
          var resizeTimer;
          var interval = Math.floor((1000 / 60) * 10);

          window.addEventListener("resize", function(event) {
            if (resizeTimer !== false) {
              clearTimeout(resizeTimer);
            }
            resizeTimer = setTimeout(function() {
              main(_data);
            }, interval);
          });
        }

        //親要素のサイズからチャート生成に必要なサイズを取得
        function setSize(args) {
          var parentWidth =
            _parentNode.clientWidth || _parentNode.parentNode.clientWidth;
          var parentHeight =
            _parentNode.clientHeight || _parentNode.parentNode.clientHeight;

          _plotWidth = parentWidth - (_plotMargin.left + _plotMargin.right);
          _plotHeight = parentHeight - (_plotMargin.top + _plotMargin.bottom);

          svg.attr("width", parentWidth).attr("height", parentHeight);

          axisLayer.attr("width", _chartWidth).attr("height", _chartHeight);

          gridLaye.attr("width", _chartWidth).attr("height", _chartHeight);
        }

        //セッションにバインドされたスケールをコピーする
        function copyScale(_selection) {
          _xScale = _selection._xScale;
          _yScale = _selection._yScale;
        }

        //チャート右に Y軸を表示
        function renderRightYAxis() {
          var yAxisCall = _yTickLabelFlip ? d3.axisLeft() : d3.axisRight();

          yAxisCall
            .scale(_yScale)
            .tickSizeOuter(0)
            .tickSize(_yTickSize)
            .tickFormat(_yTickFormat)
            .tickSizeOuter(_yTickSizeOuter);

          if (_yTicks) yAxisCall.ticks(_yTicks);
          if (_yTickValues) yAxisCall.tickValues(_yTickValues);
          if (typeof _yTickPadding == "number")
            yAxisCall.tickPadding(_yTickPadding);

          var yAxis = axisLayer.selectAll(".axis.right").data(["dummy"]);

          var newYAxis = yAxis.enter().append("g");

          newYAxis
            .merge(yAxis)
            .attr(
              "transform",
              "translate(" +
                [_plotWidth + _plotMargin.left, _plotMargin.top] +
                ")"
            )
            .attr("class", "axis right y")
            .call(yAxisCall);

          if (!_yAxisDomainLineVisible) {
            newYAxis
              .merge(yAxis)
              .selectAll(".domain")
              .remove();
          } else if (!isNaN(_xScale(0)))
            newYAxis.merge(yAxis).each(function() {
              d3.select(this)
                .select(".domain")
                .attr(
                  "transform",
                  "translate(" + [-(_plotWidth - _xScale(0)), 0] + ")"
                );
            });
        }

        //チャート左にY軸を表示
        function renderLeftYAxis() {
          var yAxisCall = _yTickLabelFlip ? d3.axisRight() : d3.axisLeft();

          yAxisCall
            .scale(_yScale)
            .tickSizeOuter(0)
            .tickSize(_yTickSize)
            .ticks(_yTicks)
            .tickFormat(_yTickFormat)
            .tickSizeOuter(_yTickSizeOuter);

          if (_yTicks) yAxisCall.ticks(_yTicks);
          if (_yTickValues) yAxisCall.tickValues(_yTickValues);
          if (_yTickPadding) yAxisCall.tickPadding(_yTickPadding);

          var yAxis = axisLayer.selectAll(".axis.left").data(["dummy"]);

          var newYAxis = yAxis.enter().append("g");

          newYAxis
            .merge(yAxis)
            .transition()
            .attr(
              "transform",
              "translate(" + [_plotMargin.left, _plotMargin.top] + ")"
            )
            .attr("class", "axis left y")
            .call(yAxisCall);

          if (!_yAxisDomainLineVisible) {
            newYAxis
              .merge(yAxis)
              .selectAll(".domain")
              .remove();
          } else if (!isNaN(_xScale(0)))
            newYAxis.merge(yAxis).each(function() {
              d3.select(this)
                .select(".domain")
                .attr("transform", "translate(" + [_xScale(0), 0] + ")");
            });
        }

        //チャート上にX軸を表示
        function renderTopXAxis() {
          var xAxisCall = _xTickLabelFlip ? d3.axisBottom() : d3.axisTop();

          xAxisCall
            .scale(_xScale)
            .tickSizeOuter(0)
            .tickSize(_xTickSize)
            .tickFormat(_xTickFormat)
            .tickSizeOuter(_xTickSizeOuter);

          if (_xTicks) xAxisCall.ticks(_xTicks);
          if (_xTickValues) xAxisCall.tickValues(_xTickValues);
          if (typeof _xTickPadding == "number")
            xAxisCall.tickPadding(_xTickPadding);

          var xAxis = axisLayer.selectAll(".axis.top").data(["dummy"]);

          var newXAxis = xAxis.enter().append("g");

          newXAxis
            .merge(xAxis)
            .attr(
              "transform",
              "translate(" + [_plotMargin.left, _plotMargin.top] + ")"
            )
            .attr("class", "axis top x")
            .call(xAxisCall);

          if (!_xAxisDomainLineVisible) {
            newXAxis
              .merge(xAxis)
              .selectAll(".domain")
              .remove();
          } else if (!isNaN(_yScale(0)))
            newXAxis.merge(xAxis).each(function() {
              d3.select(this)
                .select(".domain")
                .attr(
                  "transform",
                  "translate(" + [0, -(_plotHeight - _yScale(0))] + ")"
                );
            });
        }

        //チャート下にX軸を表示
        function renderBottomXAxis() {
          var xAxisCall = _xTickLabelFlip ? d3.axisTop() : d3.axisBottom();

          xAxisCall
            .scale(_xScale)
            .tickSizeOuter(0)
            .tickSize(_xTickSize)
            .tickFormat(_xTickFormat)
            .tickSizeOuter(_xTickSizeOuter);

          if (_xTicks) xAxisCall.ticks(_xTicks);
          if (_xTickValues) xAxisCall.tickValues(_xTickValues);
          if (typeof _xTickPadding == "number")
            xAxisCall.tickPadding(_xTickPadding);

          var xAxis = axisLayer.selectAll(".axis.bottom").data(["dummy"]);

          var newXAxis = xAxis.enter().append("g");

          newXAxis
            .merge(xAxis)
            .attr(
              "transform",
              "translate(" +
                [_plotMargin.left, _plotHeight + _plotMargin.top] +
                ")"
            )
            .attr("class", "axis bottom x")
            .call(xAxisCall);

          if (!_xAxisDomainLineVisible) {
            newXAxis
              .merge(xAxis)
              .selectAll(".domain")
              .remove();
          } else if (!isNaN(_yScale(0)))
            newXAxis.merge(xAxis).each(function() {
              d3.select(this)
                .select(".domain")
                .attr(
                  "transform",
                  "translate(" + [0, -(_plotHeight - _yScale(0))] + ")"
                );
            });
        }

        //左Y軸にラベルを表示する
        function renderLeftTopLabel() {
          var yAxisLabel = axisLayer.selectAll(".leftLabel.y").data(["dummy"]);

          var newYAxisLabel = yAxisLabel
            .enter()
            .append("text")
            .attr("class", "leftLabel y");

          yAxisLabel
            .merge(newYAxisLabel)
            .text(function(d) {
              return _leftTopLabel;
            })
            .attr("x", _plotMargin.left)
            .attr("y", _plotMargin.top)
            .attr("text-anchor", "middle")
            .attr("dominant-baseline", "middle");
        }
        //右Y軸にラベルを表示する
        function renderRightTopLabel() {
          var yAxisLabel = axisLayer.selectAll(".rightLabel.y").data(["dummy"]);

          var newYAxisLabel = yAxisLabel
            .enter()
            .append("text")
            .attr("class", "rightLabel y");

          yAxisLabel
            .merge(newYAxisLabel)
            .text(function(d) {
              return _rightTopLabel;
            })
            .attr("x", _plotMargin.left + _plotWidth)
            .attr("y", _plotMargin.top)
            .attr("text-anchor", "middle")
            .attr("dominant-baseline", "middle");
        }

        //下X軸にラベルを表示する
        function renderRightBottomLabel() {
          var xAxisLabel = axisLayer.selectAll(".rightLabel.x").data(["dummy"]);

          var newXAxisLabel = xAxisLabel
            .enter()
            .append("text")
            .attr("class", "rightLabel x");

          xAxisLabel
            .merge(newXAxisLabel)
            .text(function(d) {
              return _rightBottomLabel;
            })
            .attr("x", _plotWidth + _plotMargin.left)
            .attr("y", _plotHeight + _plotMargin.top)
            .attr("text-anchor", "middle")
            .attr("dominant-baseline", "middle");
        }

        //下X軸にラベルを表示する
        function renderLeftBottomLabel() {
          var xAxisLabel = axisLayer.selectAll(".leftLabel.x").data(["dummy"]);

          var newXAxisLabel = xAxisLabel
            .enter()
            .append("text")
            .attr("class", "leftLabel x");

          xAxisLabel
            .merge(newXAxisLabel)
            .text(function(d) {
              return _LeftBottomLabel;
            })
            .attr("x", _plotMargin.left)
            .attr("y", _plotHeight + _plotMargin.top)
            .attr("text-anchor", "middle")
            .attr("dominant-baseline", "middle");
        }

        // Y軸に横のグリッドを生成する
        function renderYAxisGrid() {
          var yAxisCall = d3
            .axisLeft(_yScale)
            .tickSizeOuter(0)
            .tickSizeInner(-_plotWidth)
            .tickFormat(function(d) {
              return null;
            });

          if (_yTicks) yAxisCall.ticks(_yTicks);

          var yAxis = gridLaye.selectAll(".grid.y").data(["dummy"]);

          var newYAxis = yAxis
            .enter()
            .append("g")
            .attr("class", "grid y");

          newYAxis
            .merge(yAxis)
            .attr(
              "transform",
              "translate(" + [_plotMargin.left, _plotMargin.top] + ")"
            )
            .call(yAxisCall);

          //グリッドにdomainのラインは不要なので削除する
          newYAxis
            .merge(yAxis)
            .selectAll(".domain")
            .remove();
          //attributeがstyleより優先されしまうので外す
          newYAxis
            .merge(yAxis)
            .selectAll(".tick line")
            .attr("stroke", null);
        }

        //x軸に縦のグリッドを生成する
        function renderXAxisGrid() {
          var xAxisCall = d3
            .axisBottom(_xScale)
            .tickSizeOuter(0)
            .tickSizeInner(-_plotHeight)
            .tickFormat(function(d) {
              return null;
            });

          if (_xTicks) xAxisCall.ticks(_xTicks);

          var xAxis = gridLaye.selectAll(".grid.x").data(["dummy"]);

          var newXAxis = xAxis.enter().append("g");

          newXAxis
            .merge(xAxis)
            .attr(
              "transform",
              "translate(" +
                [_plotMargin.left, _plotHeight + _plotMargin.top] +
                ")"
            )
            .attr("class", "grid x")
            .call(xAxisCall);

          //グリッドにdomainのラインは不要なので削除する
          newXAxis
            .merge(xAxis)
            .selectAll(".domain")
            .remove();
          //attributeがstyleより優先されしまうので外す
          newXAxis
            .merge(xAxis)
            .selectAll(".tick line")
            .attr("stroke", null);
        }

        function updateBindSelector(_selection) {
          if (!_selection.updateFanctions) _selection.updateFanctions = [];

          _selection.updateFanctions.push(main);

          _selection.update = function(data) {
            _selection.updateFanctions.forEach(function(f) {
              f(data);
            });
          };
        }
      });
    }
    //getter
    instance.getChartWidth = function(_arg) {
      if (!arguments.length) return _plotWidth;
      throw new Error("このメソッドは取得専用です");
    };
    instance.getChartHeight = function(_arg) {
      if (!arguments.length) return _plotHeight;
      throw new Error("このメソッドは取得専用です");
    };

    /**
     * x軸のアウターチックのサイズを指定する
     * @alias module:nChart/createAxis.xTickSizeOuter
     * @param {Boolean}  flag 反転(true),そのまま(false)を指定する
     */
    instance.xTickSizeOuter = function(_arg) {
      if (!arguments.length) return _xTickSizeOuter;
      _xTickSizeOuter = _arg;
      return this;
    };

    /**
     * y軸のアウターチックのサイズを指定する
     * @alias module:nChart/createAxis.yTickSizeOuter
     * @param {Boolean}  flag 反転(true),そのまま(false)を指定する
     */
    instance.yTickSizeOuter = function(_arg) {
      if (!arguments.length) return _yTickSizeOuter;
      _yTickSizeOuter = _arg;
      return this;
    };

    /**
     * x軸のチックラベルを反転する
     * @alias module:nChart/createAxis.xTickLabelFlip
     * @param {Boolean}  flag 反転(true),そのまま(false)を指定する
     */
    instance.xTickLabelFlip = function(_arg) {
      if (!arguments.length) return _xTickLabelFlip;
      _xTickLabelFlip = _arg;
      return this;
    };
    /**
     * y軸のチックラベルを反転する
     * @alias module:nChart/createAxis.yTickLabelFlip
     * @param {Boolean}  flag 反転(true),そのまま(false)を指定する
     */
    instance.yTickLabelFlip = function(_arg) {
      if (!arguments.length) return _yTickLabelFlip;
      _yTickLabelFlip = _arg;
      return this;
    };

    /**
     * y軸(左)を表示する
     * @alias module:nChart/createAxis.leftAxis
     * @param {Boolean}  flag 表示(true),非表示(false)を渡す
     */
    instance.leftAxis = function(_arg) {
      if (!arguments.length) return _leftAxisFlag;
      _leftAxisFlag = _arg;
      return this;
    };
    /**
     * y軸(右)を表示する
     * @alias module:nChart/createAxis.rightAxis
     * @param {Boolean}  flag 表示(true),非表示(false)を渡す
     */
    instance.rightAxis = function(_arg) {
      if (!arguments.length) return _rightAxisFlag;
      _rightAxisFlag = _arg;
      return this;
    };
    /**
     * x軸(上)を表示する
     * @alias module:nChart/createAxis.topAxis
     * @param {Boolean}  flag 表示(true),非表示(false)を渡す
     */
    instance.topAxis = function(_arg) {
      if (!arguments.length) return _topAxisFlag;
      _topAxisFlag = _arg;
      return this;
    };
    /**
     * x軸(下)を表示する
     * @alias module:nChart/createAxis.bottomAxis
     * @param {Boolean}  flag 表示(true),非表示(false)を渡す
     */
    instance.bottomAxis = function(_arg) {
      if (!arguments.length) return _bottomAxisFlag;
      _bottomAxisFlag = _arg;
      return this;
    };

    /**
     * x軸のticks数を設定する
     * @alias module:nChart/createAxis.xTicks
     * @param {Number}  ticks tick数を指定
     */
    instance.xTicks = function(_arg) {
      if (!arguments.length) return _xTicks;
      _xTicks = _arg;
      return this;
    };
    /**
     * y軸のticks数を設定する
     * @alias module:nChart/createAxis.yTicks
     * @param {Number}  ticks tick数を指定
     */
    instance.yTicks = function(_arg) {
      if (!arguments.length) return _yTicks;
      _yTicks = _arg;
      return this;
    };

    /**
     * x軸のticksサイズを設定する
     * @alias module:nChart/createAxis.xTickSize
     * @param {Number}  size  tick(ヒゲ)の長さを指定する
     */
    instance.xTickSize = function(_arg) {
      if (!arguments.length) return _xTickSize;
      _xTickSize = _arg;
      return this;
    };
    /**
     * y軸のticksサイズを設定する
     * @alias module:nChart/createAxis.yTickSIze
     * @param {Number}  size  tick(ヒゲ)の長さを指定する
     */
    instance.yTickSize = function(_arg) {
      if (!arguments.length) return _yTickSize;
      _yTickSize = _arg;
      return this;
    };

    /**
     * x軸のticks内容を設定する
     * @alias module:nChart/createAxis.xTickValues
     * @param {Array}  values [index,index,...] tickに表示する項目を渡す
     */
    instance.xTickValues = function(_arg) {
      if (!arguments.length) return _xTickValues;
      _xTickValues = _arg;
      return this;
    };
    /**
     * y軸のticks内容を設定する
     * @alias module:nChart/createAxis.yTickValues
     * @param {Array}  values [index,index,...] tickに表示する項目を渡す
     */
    instance.yTickValues = function(_arg) {
      if (!arguments.length) return _yTickValues;
      _yTickValues = _arg;
      return this;
    };

    /**
     * y軸のチックフォーマットを設定する
     * @alias module:nChart/createAxis.yTickFormat
     * @param {Function}  fn ラベルとして表示するテキストを渡す
     */
    instance.yTickFormat = function(_arg) {
      if (!arguments.length) return _yTickFormat;
      _yTickFormat = _arg;
      return this;
    };
    /**
     * x軸のチックフォーマットを設定する
     * @alias module:nChart/createAxis.xTickFormat
     * @param {Function}  fn ラベルとして表示するテキストを渡す
     */
    instance.xTickFormat = function(_arg) {
      if (!arguments.length) return _xTickFormat;
      _xTickFormat = _arg;
      return this;
    };

    /**
     * x軸のチックパディングを設定する
     * @alias module:nChart/createAxis.xTickPadding
     * @param {Number}  ticks tick数を指定
     */
    instance.xTickPadding = function(_arg) {
      if (!arguments.length) return _xTickPadding;
      _xTickPadding = _arg;
      return this;
    };
    /**
     * y軸のチックパディングを設定する
     * @alias module:nChart/createAxis.yTickPadding
     * @param {Number}  ticks tick数を指定
     */
    instance.yTickPadding = function(_arg) {
      if (!arguments.length) return _yTickPadding;
      _yTickPadding = _arg;
      return this;
    };

    /**
     * y軸のドメインラインを表示する
     * @alias module:nChart/createAxis.xAxisDomainLineVisible
     * @param {Boolean}  flag 表示(true),非表示(false)を渡す
     */
    instance.xAxisDomainLineVisible = function(_arg) {
      if (!arguments.length) return _xAxisDomainLineVisible;
      _xAxisDomainLineVisible = _arg;
      return this;
    };
    /**
     * x軸のドメインラインを表示する
     * @alias module:nChart/createAxis.yAxisDomainLineVisible
     * @param {Boolean}  flag 表示(true),非表示(false)を渡す
     */
    instance.yAxisDomainLineVisible = function(_arg) {
      if (!arguments.length) return _yAxisDomainLineVisible;
      _yAxisDomainLineVisible = _arg;
      return this;
    };

    ///////////////// グリッド /////////////////////////////////////////////////////////////

    /**
     * y軸のグリッドを表示する
     * @alias module:nChart/createAxis.xAxisGridVisible
     * @param {Boolean}  flag 表示(true),非表示(false)を渡す
     */
    instance.xAxisGridVisible = function(_arg) {
      if (!arguments.length) return _xAxisGridVisible;
      _xAxisGridVisible = _arg;
      return this;
    };
    /**
     * x軸のグリッドを表示する
     * @alias module:nChart/createAxis.yAxisGridVisible
     * @param {Boolean}  flag 表示(true),非表示(false)を渡す
     */
    instance.yAxisGridVisible = function(_arg) {
      if (!arguments.length) return _yAxisGridVisible;
      _yAxisGridVisible = _arg;
      return this;
    };

    ///////////////// ラベル /////////////////////////////////////////////////////////////
    /**
     * 左上のラベル内容を設定する
     * @alias module:nChart/createAxis.leftTopLabel
     * @param {String}  text ラベルとして表示するテキストを渡す
     */
    instance.leftTopLabel = function(_arg) {
      if (!arguments.length) return _leftTopLabel;
      _leftTopLabel = _arg;
      return this;
    };
    /**
     * 右上のラベル内容を設定する
     * @alias module:nChart/createAxis.rightTopLabel
     * @param {String}  text ラベルとして表示するテキストを渡す
     */
    instance.rightTopLabel = function(_arg) {
      if (!arguments.length) return _rightTopLabel;
      _rightTopLabel = _arg;
      return this;
    };
    /**
     * 左下のラベル内容を設定する
     * @alias module:nChart/createAxis.leftBottomLabel
     * @param {String}  text ラベルとして表示するテキストを渡す
     */
    instance.leftBottomLabel = function(_arg) {
      if (!arguments.length) return _LeftBottomLabel;
      _LeftBottomLabel = _arg;
      return this;
    };

    /**
     * レスポンシブ機能の有効・無効を設定する
     * @param {Boolean}  flag 有効,　無効を渡す
     * @alias module:nChart/createAxis.responsive
     */
    instance.responsive = function(_arg) {
      if (!arguments.length) return _responsive;
      _responsive = _arg;
      return this;
    };

    return instance;
  }
})();

createHBarChart.js

/**
 * @module nChart/createHBarChart
 * @desc 棒グラフ(横)を生成します。
 * @example
 *var instans = nChart.createHBarChart()
 *
 *
 *var selector = d3.select(query)
 *  .datum(data)
 *  .call(instans)
 */
!(function() {
	'use strict';
	if (typeof module !== 'undefined' && module.exports) {
		module.exports = createHBarChart;
	} else {
		window.createHBarChart = createHBarChart;
	}

	function createHBarChart() {
		var _addSvgElement = true;
		var _plotWidth, _plotHeight;

		var _plotMargin = { top: 0, left: 0, bottom: 0, right: 0 };

		var _x = function(d) {
				return d;
			},
			_y = function(d) {
				return d;
			};

		var _xScale = d3.scaleLinear(),
			_yScale = d3.scaleBand();

		var _xScaleDomain, _yScaleDomain, _xScaleRange, _yScaleRange;

		var _forcedXScaleDomain, _forcedYScaleDomain;

		var _scalePaddingInner = 0,
			_scalePaddingOuter = 0;

		var _valueLabelVisible = false;
		var _responsive = true;

		var _parentNode;
		var _svg, _backgroundLayer, _chartLayer, _plotLayer, _axisLayer;

		function instance(_selection) {
			_selection.each(function(_data) {
				var isHash = function(value) {
					return value.toString() === '[object Object]';
				};
				var isArray =
					Array.isArray ||
					function(value) {
						return value.toString() === '[object Array]';
					};

				setLayers(_selection);

				main(_data);

				if (_responsive) setReSizeEvent(_selection);

				updateBindSelector(_selection);

				function main(data) {
					setSize();

					if (isHash(data)) {
						var tmp = [];
						Object.keys(data).forEach(function(key) {
							tmp.push(data[key]);
						});
						setScale(Array.prototype.concat.apply([], tmp));
					} else if (isArray(data)) {
						setScale(data);
					}

					renderBarChart(data);
					if (_valueLabelVisible) renderValueLabels(data);
				}

				function setReSizeEvent(_selection) {
					var resizeTimer;
					var interval = Math.floor(1000 / 60 * 10);

					window.addEventListener('resize', function(event) {
						if (resizeTimer !== false) {
							clearTimeout(resizeTimer);
						}
						resizeTimer = setTimeout(function() {
							main(_data);
							_selection.dispatch('resize');
						}, interval);
					});
				}

				function setLayers(_selection) {
					//parent element
					_parentNode = _selection.node();

					//parent -> svg element
					var target = _addSvgElement ? 'svg' : 'g';

					var selectedSVG = _selection.selectAll(target).data([ null ]);
					var newSVG = selectedSVG.enter().append(target).attr('class', 'createHBarChart');
					_svg = selectedSVG.merge(newSVG);

					//svg -> background layer
					var newBackgroundLayer = _svg.selectAll('.backgroundLayer').data([ null ]);
					_backgroundLayer = newBackgroundLayer
						.enter()
						.append('g')
						.classed('backgroundLayer', true)
						.merge(newBackgroundLayer);

					newBackgroundLayer.append('rect').classed('bg', true);

					//svg -> chart layer
					var newChartLayer = _svg.selectAll('.chartLayer').data([ null ]);
					_chartLayer = newChartLayer.enter().append('g').classed('chartLayer', true).merge(newChartLayer);

					//chart layer -> plot layer
					var newPlotLayer = _chartLayer.selectAll('.plotLayer').data([ null ]);
					_plotLayer = newChartLayer.enter().append('g').classed('plotLayer', true).merge(newPlotLayer);

					//chart layer -> axis layer
					var newAxisLayer = _chartLayer.selectAll('.axisLayer').data([ null ]);
					_axisLayer = newChartLayer.enter().append('g').classed('axisLayer', true).merge(newAxisLayer);
				}

				function setSize() {
					var parentWidth = _parentNode.clientWidth || _parentNode.parentNode.clientWidth;
					var parentHeight = _parentNode.clientHeight || _parentNode.parentNode.clientHeight;

					_plotWidth = parentWidth - (_plotMargin.left + _plotMargin.right);
					_plotHeight = parentHeight - (_plotMargin.top + _plotMargin.bottom);

					_svg.attr('width', parentWidth).attr('height', parentHeight);

					_backgroundLayer.select('.bg').attr('width', parentWidth).attr('height', parentHeight);

					_plotLayer
						.attr('width', _plotWidth)
						.attr('height', _plotHeight)
						.attr('transform', 'translate(' + [ _plotMargin.left, _plotMargin.top ] + ')');
				}

				function setScale(data) {
					var yMap = data.map(function(d) {
						return _y(d).toString();
					});
					var xMax = d3.max(data, function(d) {
						return _x(d);
					});
					var xMin = d3.min(data, function(d) {
						return _x(d);
					});
					var xExtent = [ xMin, xMax ];

					if (xMin > 0) xExtent = [ 0, xMax ];

					_xScaleDomain = _forcedXScaleDomain ? _forcedXScaleDomain : xExtent;
					_yScaleDomain = _forcedYScaleDomain ? _forcedYScaleDomain : yMap;

					_xScaleRange = [ 0, _plotWidth ];
					_yScaleRange = [ _plotHeight, 0 ];

					_xScale.domain(_xScaleDomain);
					_yScale.domain(_yScaleDomain);
					_xScale.range(_xScaleRange);
					_yScale.rangeRound(_yScaleRange);

					scaleBindSelector(_selection);

					_yScale.paddingInner(_scalePaddingInner).paddingOuter(_scalePaddingOuter);
				}

				function renderBarChart(data) {
					var bar = _plotLayer.selectAll('.bar').data(data, function(d) {
						return _y(d);
					});

					bar.exit().remove();

					var newBar = bar
						.enter()
						.append('rect')
						.attr('class', function(d) {
							return 'bar ' + _y(d);
						})
						.attr('transform', function(d) {
							var x = _xScale(Math.min(0, _x(d)));
							return 'translate(' + [ x, _yScale(_y(d)) ] + ')';
						});

					bar
						.merge(newBar) //選択済みセレクションをenterで追加されるセレクションにマージする
						.attr('height', _yScale.bandwidth())
						.transition()
						.attr('width', function(d) {
							var width = Math.abs(_xScale(_x(d)) - _xScale(0));
							return width;
						})
						.attr('transform', function(d) {
							var x = _xScale(Math.min(0, _x(d)));
							return 'translate(' + [ x, _yScale(_y(d)) ] + ')';
						});
				}

				function renderValueLabels(data) {
					var label = _plotLayer.selectAll('.label').data(data, function(d) {
						return _y(d);
					});

					label.exit().remove();

					var newLabel = label.enter().append('text').attr('class', function(d) {
						return 'label ' + _y(d);
					});

					var formart = d3.format('.2f');

					label
						.merge(newLabel) //選択済みセレクションをenterで追加されるセレクションにマージする
						.attr('text-anchor', function(d) {
							if (d.Bop > 0) return 'start';
							if (d.Bop < 0) return 'end';
						})
						.attr('dominant-baseline', 'middle')
						.attr('x', function(d) {
							if (_x(d) <= 0) return '-0.5em';
							return '0.5em';
						})
						.attr('y', _yScale.bandwidth() / 2)
						.html(function(d) {
							var value = _x(d) * 1000;
							var abs = Math.abs(value);
							var str = null;

							if (abs > 900000000000) {
								str = formart(value / 1000000000000);
								str = '<tspan>' + str + '</tspan>';
								str += '<tspan> 兆</tspan>';
							} else {
								str = formart(value / 100000000000);
								str = '<tspan>' + str + '</tspan>';
								str += '<tspan> 千億</tspan>';
							}

							return str;
						})
						.transition()
						.attr('transform', function(d) {
							var x = _xScale(_x(d));
							return 'translate(' + [ x, _yScale(_y(d)) ] + ')';
						});
				}

				function scaleBindSelector(_selection) {
					//セレクターにaxisがバインドできるか判別するためのフラグ
					_selection._enableBindAxis = true;
					//セレクターにスケールをバインドする
					_selection._xScale = _xScale;
					_selection._yScale = _yScale;

					//セレクターにマージンをバインドする
					_selection._plotMargin = _plotMargin;

					//セレクターにアクセサをバインドする
					_selection._x = _x;
					_selection._y = _y;

					_selection._addSvgElement = _addSvgElement;
				}

				function updateBindSelector(_selection) {
					if (!_selection.updateFanctions) _selection.updateFanctions = [];

					_selection.updateFanctions.push(main);

					_selection.update = function(data) {
						_selection.updateFanctions.forEach(function(f) {
							f(data);
						});
					};
				}
			});
		}
		//getter
		instance.getChartWidth = function(_arg) {
			if (!arguments.length) return _plotWidth;
			throw new Error('このメソッドは取得専用です');
		};
		instance.getChartHeight = function(_arg) {
			if (!arguments.length) return _plotHeight;
			throw new Error('このメソッドは取得専用です');
		};

		/**
     * チャート描画エリアのマージンを設定する
     * @alias module:nChart/createHBarChart.plotMargin
     * @param {Object}  options 四方のマージンサイズを渡す
     * @param {Number}  options.top 上辺のマージン
     * @param {Number}  options.left 左辺のマージン
     * @param {Number}  options.bottom 下辺のマージン
     * @param {Number}  options.right 右辺のマージン
     */
		instance.plotMargin = function(_arg) {
			if (!arguments.length) return _plotMargin;
			Object.keys(_arg).forEach(function(key) {
				_plotMargin[key] = _arg[key];
			});
			return this;
		};

		/**
     * データセットからx軸に適応するデータ項目を設定する
     * @alias module:nChart/createHBarChart.x
     * @param {Function}  accessor アクセサ関数を渡す
     */
		instance.x = function(_arg) {
			if (!arguments.length) return _x;
			_x = _arg;
			return this;
		};
		/**
     * データセットからy軸に適応するデータ項目を設定する
     * @alias module:nChart/createHBarChart.y
     * @param {Function}  accessor  アクセサ関数を渡す
     */
		instance.y = function(_arg) {
			if (!arguments.length) return _y;
			_y = _arg;
			return this;
		};

		/**
     * x軸のスケールを設定する
     * @alias module:nChart/createHBarChart.xScale
     * @param {Object} scale d3スケールオブジェクトを渡す
     */
		instance.xScale = function(_arg) {
			if (!arguments.length) return _xScale;
			_xScale = _arg;
			return this;
		};

		/**
     * y軸のスケールを設定する
     * @alias module:nChart/createHBarChart.yScale
     * @param {Object} scale d3スケールオブジェクトを渡
     */
		instance.yScale = function(_arg) {
			if (!arguments.length) return _yScale;
			_yScale = _arg;
			return this;
		};
		/**
     * x軸のドメイン範囲を設定する
     * @alias module:nChart/createHBarChart.xScaleDomain
     * @param {Number[]} domain 描画する最小値と最大値を渡す
     */
		instance.xScaleDomain = function(_arg) {
			if (!arguments.length) return _xScaleDomain;
			_forcedXScaleDomain = _arg;
			return this;
		};
		/**
     * y軸のドメイン範囲を設定する
     * @alias module:nChart/createHBarChart.yScaleDomain
     * @param {Number[]}  domain  描画する最小値と最大値を渡す
     */
		instance.yScaleDomain = function(_arg) {
			if (!arguments.length) return _yScaleDomain;
			_forcedYScaleDomain = _arg;
			return this;
		};
		/**
     * x軸のバーチャート間のパディング（内側）を指定する
     * @alias module:nChart/createHBarChart.scalePaddingInner
     * @param {Number[]} padding 0〜1の間で、バーチャートのサイズに対する割合を渡す
     */
		instance.scalePaddingInner = function(_arg) {
			if (!arguments.length) return _scalePaddingInner;
			_scalePaddingInner = _arg;
			return this;
		};
		/**
     * x軸のバーチャートのパディング（外側）を指定する
     * @alias module:nChart/createHBarChart.scalePaddingOuter
     * @param {Number[]} padding 0〜1の間で、バーチャートのサイズに対する割合を渡す
     */
		instance.scalePaddingOuter = function(_arg) {
			if (!arguments.length) return _scalePaddingOuter;
			_scalePaddingOuter = _arg;
			return this;
		};

		/**
     * バーの先端に値ラベルを表示する
     * @alias module:nChart/createAxis.xAxisDomainLineVisible
     * @param {Boolean}  flag 表示(true),非表示(false)を渡す
     */
		instance.valueLabelVisible = function(_arg) {
			if (!arguments.length) return _valueLabelVisible;
			_valueLabelVisible = _arg;
			return this;
		};

		/**
     * レスポンシブ機能の有効・無効を設定する
     * @alias module:nChart/createHBarChart.responsive
     * @param {Boolean}  flag 有効,　無効を渡す
     */
		instance.responsive = function(_arg) {
			if (!arguments.length) return _responsive;
			_responsive = _arg;
			return this;
		};

		/**
     * svgエレメントを追加する・しないを設定する
     * @alias module:nChart/createHBarChart.addSvgElement
     * @param {Boolean}  flag 有効,　無効を渡す
     */
		instance.addSvgElement = function(_arg) {
			if (!arguments.length) return _addSvgElement;
			_addSvgElement = _arg;
			return this;
		};

		return instance;
	}
})();

EEurope.csv

index.html

<!DOCTYPE html>
<html lang='jp'>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed&display=swap" rel="stylesheet">
<style>
.bg {
    display: none;
}
/* axis */
.axisLayer .axis {
}
.axisLayer .axis .domain {
    stroke: #333333;
}
.axisLayer .tick line {
    stroke: #333333;
    stroke-width: 1px;
}
.axisLayer .tick text {
    fill: #333333;
    letter-spacing: .05em;
}

/* label */
.axisLayer .label {
    font-weight: normal;
    letter-spacing: .05em;
}


/* grid */
.backgroundLayer .grid line {
    stroke: #cccccc;
    stroke-dasharray: 3,3;
}

.backgroundLayer .grid.y .tick {
    stroke-width:2px;
    stroke: gray;
    stroke-dasharray: 2,5;
}
.backgroundLayer .grid.y .tick:nth-child(even) {
    stroke-width:1px;
    stroke: gray;
    stroke-dasharray: 5,2;
}

.plotLayer text.label tspan:nth-child(1){
    font-family: Roboto Condensed,sans-serif;    
    font-size: 1.2em;
}
.plotLayer text.label tspan:nth-child(2){
    font-size: 0.7em;
    margin-right: 1em;
}
/* +grind のベースライン */
.backgroundLayer .grid .domain {
    stroke: none;
}


html, body {
    margin: 0px;
    padding: 0px;
    height:100%;
    overflow: hidden；
}

#hBarChart {
    width:100%;
    max-width:980px;
    height:90%;
    margin-bottom: 64px;
}
#hBarChart input {
    width:100%;
}

#swiper {
    position: fixed;
    bottom:0;
    width:100%;
    max-width:980px;

    height: 64px;
    background-color: white;
    border-top: 1px solid black;
}

.swiper-wrapper{
    display: flex;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch:
}
.swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Roboto Condensed,sans-serif;
    width: 48px;
    height: 48px;
    padding: 10px;
    border-left: 1px solid black;
}
.swiper-slide-active {
    color:white;
    background-color:black;
}

#info {
    text-align: right;
    color:#666;
    font-family: Roboto Condensed,sans-serif;    
    position: fixed;
    top:60px;
    left:100px;
    width:120px;
    height: 160px;
    padding:8px;
    border:1px solid #ccc;
    background-color: rgba(255, 255, 255, 0.8);
    transform: scale(1);
}
#Year {
    font-size:62px;
}
#info .money span:nth-child(1){
    width:36px;
    text-align: right;
    display: inline-block;
    font-size:18px;
    margin-right: 8px;
}
#info .money span:nth-child(2){
    width:40px;
    text-align: right;
    display: inline-block;
    font-size:20px;
    margin-right: 8px;
}
#info .money span:nth-child(3){
    width:28px;
    text-align: left;
    display: inline-block;
    font-size:14px;
}

.plus{
    color:blue;
}
.minus {
    color:red;
}



@media(max-width: 375px) {
    #info {
        top:40px;
        left:68px;
        transform: scale(0.75);
    }
}
</style>

</head>
<body>
<div id="swiper"></div>    
<div id="info">
    <div id="Year"></div>
    <div id="Exp" class="money"></div>
    <div id="Imp" class="money"></div>
    <div id="Bop" class="money"></div>
</div>
<div id="hBarChart"></div>
<div></div>

<script src='//unpkg.com/d3@5.0.0/dist/d3.min.js'></script>
<script src='./createAxis.js'></script>
<script src='./createHBarChart.js'></script>
<script src='./swiper.js'></script>
<script>
var max = 10;
var fmt = d3.format(".2f");
var info = d3.select("#info")    
var total_Exp_Imp = null;
var current_data = null;

var swiper = d3.select("#swiper");
var swiperData = d3.range(1979, 2019).map(function (d, i) {
    return { index: i, value: d, label: d };
});
swiper.datum(swiperData).call(createSwiper());

var cast = function(d){
    Object.keys(d).forEach(function(key){
        if(!isNaN(+d[key])) d[key] = +d[key];
    })
    return d
}

var p = [];
p.push(d3.csv("./Asia.csv", cast));
p.push(d3.csv("./Africa.csv", cast));
p.push(d3.csv("./LAmerica.csv", cast));
p.push(d3.csv("./NAmerica.csv", cast));
p.push(d3.csv("./EEurope.csv", cast));
p.push(d3.csv("./WEurope.csv", cast));
p.push(d3.csv("./MEast.csv", cast));
p.push(d3.csv("./Oceania.csv", cast));

p.push(d3.csv("./all.csv", cast));

Promise.all(p).then(function(data){
    total_Exp_Imp = d3.nest()
        .rollup(function(d){ return d[0] })
        .key(function (d) { return d["Years"] })
        .map(data.pop())
    

    var dataset = data.reduce(function(acr, crr){
        var tmp = acr.concat(crr)
        return tmp;
    }, []);

    var yearsNested = d3.nest()
    .key(function(d){ return d["Years"]})
    .map(dataset)


    current_data = filtering(yearsNested.get("1979"));
    var selector = initChart(current_data.con)
    changeColor(selector, current_data)
    total_Exp_Imp_info(1979)


    swiper.on("slideChange", function (d) {
        var year = d.value;
        current_data = filtering(yearsNested.get(year))

        selector.update(current_data.con)
        changeColor(selector, current_data)
        total_Exp_Imp_info(year)
    });

    selector.on("resize", function(){
        changeColor(selector, current_data)
    });

});

function total_Exp_Imp_info(year){
    var value = total_Exp_Imp.get(year);
    var exp = (value["Exp-Total"]*1000) ;
    var imp = value["Imp-Total"]*1000;
    var bop = exp - imp;
    
    info.selectAll("span").remove()

    info.select("#Year").text(year);
    info.select("#Exp").append("span").text("輸出")
    info.select("#Exp").append("span").text(fmt(exp / 1000000000000));
    info.select("#Exp").append("span").text("兆円")
    info.select("#Imp").append("span").text("輸入")
    info.select("#Imp").append("span").text(fmt(imp / 1000000000000));
    info.select("#Imp").append("span").text("兆円")
    info.select("#Bop").append("span").text("収支");    
    info.select("#Bop").append("span").text(fmt(bop / 1000000000000))
    .attr("class", (bop > 0) ? "plus" : "minus")
    info.select("#Bop").append("span").text("兆円")

    info.selectAll(".value").append("span").text("兆円")

}

function changeColor(selector, filterd){
    selector.selectAll(".bar")
        .each(function (d) {
            if (d.Bop > 0) {
                d3.select(this).attr("fill", "blue")
            } else {
                d3.select(this).attr("fill", "red")
            }
        })

    var lowCountry = d3.nest()
        .key(function(d){ return d.Country})
        .map(filterd.low)

    var topCountry = d3.nest()
        .key(function (d) { return d.Country })
        .map(filterd.top)


    selector.select(".axisLayer > g").selectAll(".tick text").each(function (d) {
        if(lowCountry.get(d)) d3.select(this).attr("stroke", "red")
        if (topCountry.get(d)) d3.select(this).attr("stroke", "blue")
    });

}

function filtering(data){
    data.sort(function (a, b) { return a["Bop"] - b["Bop"] })
    var low = data.slice(0, max);
    var top = data.reverse().slice(0, max);
    var con = low.reverse().concat(top)
    return {low:low, top:top, con:con}
}

function initChart(data){
    var chart = createHBarChart()
        .plotMargin({ top: 30, left: 80, bottom: 30, right: 40 })
        .x(function (d) { return d["Bop"] })
        .y(function (d) { return d["Country"] })
        .xScaleDomain([-9000000000, 9000000000])
        .scalePaddingInner(0.1)
        .scalePaddingOuter(0.5)
        .valueLabelVisible(true)

    var axis = createAxis()
        .topAxis(true)
        .xAxisGridVisible(true)
        .yAxisGridVisible(true)
        .yTickPadding(0)
        .xTickSize(4)
        .yTickSize(4)
        .xTickSizeOuter(0)
        .yTickSizeOuter(0)
        .xAxisDomainLineVisible(true)
        .yAxisDomainLineVisible(false)
        .xTickFormat(function(d){
            return (d*1000)/1000000000000
        })

    var selector = d3.selectAll("#hBarChart")
        .datum(data)
        .call(chart)
        .call(axis)



    return selector;
}

</script>
</body>
</html>

LAmerica.csv

MEast.csv

NAmerica.csv

Oceania.csv

preview.png

swiper.js

/**
 * @module nChart/swiper
 * @desc チャートにテキストラベルを追加します
 * @example
 * var swiper = d3.select("#swiper");
 * var swiperData = d3.range(1976, 2017).map(function(d, i) {
 * return { index: i, value: d, label: d };
 * });
 *
 * swiper.datum(swiperData).call(nChart.createSwiper());
 */

!(function() {
	'use strict';
	if (typeof module !== 'undefined' && module.exports) {
		module.exports = createSwiper;
	} else {
		window.createSwiper = createSwiper;
	}

	function createSwiper() {
		var _wrapper = null;

		var _minIndex = null;
		var _maxIndex = null;
		var _currentIndex = 0;
		var _slideDuration = 400;
		var _autoAnimation = true;

		var _dispatch = d3.dispatch('edgeClick', 'slideClick', 'slideChange');

		function instance(_selection) {
			_selection.on = function() {
				return this.on.apply(_dispatch, arguments);
			};

			_selection.each(function(_data) {
				_wrapper = d3.select(this).append('div').classed('swiper-wrapper', true);

				main();

				function main() {
					getIndex(_data);

					addSlide(_data);
					addBlank();

					//デフォルトのインデックス
					selectedSlide(_currentIndex, _selection, 0);

					setClickSlideEvent(_selection);
					setClickEdgeEvent(_selection);
					setKeyEvent(_selection);
				}

				_selection.minIndex = function(_arg) {
					if (!arguments.length) return _minIndex;
					_minIndex = _arg;
					return this;
				};
				_selection.maxIndex = function(_arg) {
					if (!arguments.length) return _maxIndex;
					_maxIndex = _arg;
					return this;
				};

				_selection.nextSlide = function() {
					if (_maxIndex <= _currentIndex) return;
					_currentIndex += 1;
					selectedSlide(_currentIndex, _selection, _slideDuration);
					return this;
				};

				_selection.prevSlide = function() {
					if (_minIndex >= _currentIndex) return;
					_currentIndex -= 1;
					selectedSlide(_currentIndex, _selection, _slideDuration);
					return this;
				};

				_selection.selectSlide = function(_arg) {
					if (!arguments.length) return _currentIndex;
					_currentIndex = _arg;
					selectedSlide(_currentIndex, _selection, 0);
					return this;
				};

				_selection.autoAnimation = function(_arg) {
					if (!arguments.length) return _autoAnimation;
					_autoAnimation = _arg;
					return this;
				};
			});
		}

		function addSlide(_data) {
			var selectSlide = _wrapper.selectAll('swiper-slide').data(_data);

			var enterSlide = selectSlide.enter().append('div').classed('swiper-slide clickable', true);

			selectSlide
				.merge(enterSlide)
				.attr('data-index', function(d, i) {
					return i;
				})
				.attr('data-value', function(d) {
					return d.value;
				})
				.text(function(d) {
					return d.label;
				});
		}

		function getIndex(_data) {
			_minIndex = 0;
			_maxIndex = _data.length - 1;
		}

		function addBlank() {
			_wrapper.insert('div', ':first-child').classed('swiper-blank', true);
			_wrapper.append('div').classed('swiper-blank', true);
		}

		//スライドがクリックされた際に発行されるイベントを設定
		function setClickSlideEvent(_selection) {
			_wrapper.selectAll('.swiper-slide').on('click.centerd', function(d, i) {
				console.log('click', _selection.node());
				selectedSlide(i, _selection, _slideDuration);
				_dispatch.call('slideClick', this, d);
			});
		}

		//端のスライドがクリックされた際に発行されるイベントを設定
		function setClickEdgeEvent(_selection) {
			var edge = d3.selectAll('.swiper-slide').filter(function(d, i, node) {
				if (0 == i) d._edge = 'first';
				if (node.length - 1 == i) d._edge = 'first';
				return 0 == i || node.length - 1 == i;
			});

			edge.on('click.edgeclick', function(d) {
				_dispatch.call('edgeClick', this, d);
			});
		}

		function setKeyEvent(_selection) {
			var KeyDownFunc = function(e) {
				var keyCode = e.keyCode;
				if (keyCode == 37) {
					//←アローキー
					_selection.prevSlide();
				} else if (keyCode == 39) {
					//→アローキー
					_selection.nextSlide();
				}
			};

			if (document.addEventListener) {
				document.addEventListener('keydown', KeyDownFunc);
			} else if (document.attachEvent) {
				document.attachEvent('onkeydown', KeyDownFunc);
			}
		}

		function selectedSlide(index, _selectin, duration) {
			_selectin.selectAll('.swiper-slide').classed('swiper-slide-active', false);
			var container = _selectin.select('.swiper-wrapper').node();

			console.dir(container);

			var slide = d3
				.selectAll('.swiper-slide')
				.filter(function(d, i, node) {
					return i == index;
				})
				.classed('swiper-slide-active', true);

			var start = container.scrollLeft;
			var target = slide.node().offsetLeft - container.clientWidth / 2 + 32;

			if (_autoAnimation) {
				if (!duration) {
					container.scrollLeft = target;
				} else {
					moveTween(start, target, duration, d3.easeCubicOut, function(d) {
						container.scrollLeft = d;
					});
				}
			}

			_currentIndex = index;
			_dispatch.call('slideChange', this, slide.datum());
		}

		function moveTween(start, target, duration, ease, callback) {
			var scale = d3.scaleLinear().domain([ 0, duration ]).range([ 0, 1 ]); //.clamp(true);
			var interpolateX = d3.interpolate(start, target);
			var t = d3.timer(function(elapsed) {
				var c = ease(scale(elapsed));
				callback(interpolateX(c));
				if (elapsed > duration) t.stop();
			}, 100);
		}

		return instance;
	}
})();

thumbnail.png

WEurope.csv