D3 Examples - china

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Tangle document</title>
<style>
/*
 *  TangleKit.css
 *  Tangle 0.1.0
 *
 *  Created by Bret Victor on 6/10/11.
 *  (c) 2011 Bret Victor.  MIT open-source license.
 *
 */
​
​
/* cursor */
​
.TKCursorDragHorizontal {
    cursor: pointer;
    cursor: move;
    cursor: col-resize;
}
​
​
/* TKToggle */
​
.TKToggle {
    color: #46f;
    border-bottom: 1px dashed #46f;
    cursor: pointer;
}
​
​
/* TKAdjustableNumber */
​
.TKAdjustableNumber {
    position:relative;
    color: #46f;
    border-bottom: 1px dashed #46f;
}
​
.TKAdjustableNumberHover {
}
​
.TKAdjustableNumberDown {
    color: #00c;
    border-bottom: 1px dashed #00c;
}
​
.TKAdjustableNumberHelp {
    position:absolute;
    color: #00f;
    font: 9px "Helvetica-Neue", "Arial", sans-serif;
}
​
​
</style>
    <!-- Tangle -->
    <script type="text/javascript" src="Tangle.js"></script>
​
    <!-- TangleKit (optional) -->
    <link rel="stylesheet" href="TangleKit.css" type="text/css">
    <script type="text/javascript" src="mootools.js"></script>
    <script type="text/javascript" src="sprintf.js"></script>
    <script type="text/javascript" src="BVTouchable.js"></script>
    <script type="text/javascript" src="TangleKit.js"></script>
​
    <!-- example -->
  <script type="text/javascript">
// Замыкание
(function() {
  /**
   * Корректировка округления десятичных дробей.
   *
   * @param {String}  type  Тип корректировки.
   * @param {Number}  value Число.
   * @param {Integer} exp   Показатель степени (десятичный логарифм основания корректировки).
   * @returns {Number} Скорректированное значение.
   */
  function decimalAdjust(type, value, exp) {
    // Если степень не определена, либо равна нулю...
    if (typeof exp === 'undefined' || +exp === 0) {
      return Math[type](value);
    }
    value = +value;
    exp = +exp;
    // Если значение не является числом, либо степень не является целым числом...
    if (isNaN(value) || !(typeof exp === 'number' && exp % 1 === 0)) {
      return NaN;
    }
    // Сдвиг разрядов
    value = value.toString().split('e');
    value = Math[type](+(value[0] + 'e' + (value[1] ? (+value[1] - exp) : -exp)));
    // Обратный сдвиг
    value = value.toString().split('e');
    return +(value[0] + 'e' + (value[1] ? (+value[1] + exp) : exp));
  }
​
  // Десятичное округление к ближайшему
  if (!Math.round10) {
    Math.round10 = function(value, exp) {
      return decimalAdjust('round', value, exp);
    };
  }
  // Десятичное округление вниз
  if (!Math.floor10) {
    Math.floor10 = function(value, exp) {
      return decimalAdjust('floor', value, exp);
    };
  }
  // Десятичное округление вверх
  if (!Math.ceil10) {
    Math.ceil10 = function(value, exp) {
      return decimalAdjust('ceil', value, exp);
    };
  }
})();
​
​
        function setUpTangle () {
​
            var element = document.getElementById("example");
​
            var tangle = new Tangle(element, {
                initialize: function () {
                    this.met = 41.4;
                    this.china = 100;
                },
                update: function () {
                    this.met = (this.china*41.4)/100*0.6+41.4*0.4
                }
            });
        }
​
    </script>
</head>
​
<body onload="setUpTangle();">
​
    <p id="example" style="font-size:26px;font-family: arial;">
        Если юань будет стоить <span data-var="china" style="font-size:24px;  font-family: arial black;color:steelblue;" class="TKAdjustableNumber" data-min="50" data-max="150"> % </span> то цены на металлы упадут <span data-var="met" style="font-size:24px;color:darkred;  font-family: arial black;"></span>
    </p>
​
</body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>
​
    
</script>
    
</body>
</html>
​
    