d3 - 线性比例转换

application.route.js

import Route from 'ember-route';
import { setProperties } from 'ember-metal/set';

export default Route.extend({
  activate() {
    document.body.classList.add('standard');
  },
  
  setupController(controller) {
    this._super(...arguments);
    setProperties(controller, {
      name: '线性比例转换',
      version: d3.version
    });
  }
});

application.template.hbs

<header class="container-fluid">
  <h1>d3 - {{name}}</h1>
  <h3>version: {{version}}</h3>
</header>

<hr>

<main class="container-fluid">
	{{outlet}}
</main>

helpers.scale.js

import Helper from 'ember-helper';

export function scale(
	args, {type = "Linear", domain, range, clamp, invert = false}
) {
  if ("Time" === type) {
    if (!(args[0] instanceof Date)) {
    	domain = [new Date(domain[0]), new Date(domain[1])];
    	args[0] = new Date(args[0]);
    }
  };
  
  const scaler = d3[`scale${type}`]()
  	.domain(domain)
  	.range(range)
  	.clamp(clamp);

  return invert ? scaler.invert(args[0]) : scaler(args[0]);
}

export default Helper.helper(scale);

index.route.js

import Route from 'ember-route';

export default Route.extend({
  model() {
    return {
      domain: {
        min: 0,
        max: 100
      },
      range: {
        min: 0,
        max: 1
      },
      test: 50,
      clamp: false
    }
  }
});

index.template.hbs

<div class="grid">
  <section class="form-group">
    <label for="mmax">最小阈值 (domain value)：</label>
    {{input id="mmax" type="number" class="form-control" value=model.domain.min}}
  </section>

  <section class="form-group">
    <label for="mmin">最大阈值 (domain value)：</label>
    {{input id="mmin" type="number" class="form-control" value=model.domain.max}}
  </section>
</div>

<div class="grid">
  <section class="form-group">
    <label for="rmax">最小范围 (range value)：</label>
    {{input id="rmax" type="number" class="form-control" value=model.range.min}}
  </section>

  <section class="form-group">
    <label for="rmin">最大范围 (range value)：</label>
    {{input id="rmin" type="number" class="form-control" value=model.range.max}}
  </section>
</div>

<div class="grid">
  <section class="form-group">
    <label for="test">测试数值：</label>
    {{input id="test" type="number" class="form-control" value=model.test}}
  </section>

  <section class="form-group">
    <label for="clamp">限定范围（不允许超出最小／最大范围）</label>
    {{input id="clamp" type="checkbox" class="form-control" checked=model.clamp}}
    <span class="help">{{if model.clamp "开启" "关闭"}}</span>
  </section>
</div>


<div class="alert alert-error">
	<strong>
  	转换结果：{{scale model.test
  						domain=(array model.domain.min model.domain.max)
              range=(array model.range.min model.range.max)
              clamp=model.clamp
              invert=false}}
  </strong>
</div>

styles.app.css

*, *::before, &::after {
  box-sizing: border-box;
}

strong {
  color: red;
  font-size: 1.2rem;
}

@media screen and (max-width: 768px) {
	.grid {
  	flex-direction: row;
    justify-content: space-between;
	}
}

.grid > .form-group {
  width: 49%;
}

.form-group > label {
  font-weight: bold;
  user-select: none;
}

.form-group > .help {
  position: relative;
  top: -33px;
  left: 27px;
}

twiddle.json

{
  "version": "0.10.5",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": true,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js",
    "hack": "//cdnjs.cloudflare.com/ajax/libs/hack/0.7.7/hack.css",
    "standard": "//cdnjs.cloudflare.com/ajax/libs/hack/0.7.7/standard.css",
    "d3": "//cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.js",
    "ember": "2.9.0",
    "ember-data": "2.9.0",
    "ember-template-compiler": "2.9.0",
    "ember-testing": "2.9.0"
  },
  "addons": {
  	"ember-composable-helpers": "*",
    "ember-route-action-helper": "*",
    "ember-truth-helpers": "*"
  }
}