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';
import { capitalize } from 'ember-string';

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

  return scaler(value);
}

export default Helper.helper(scale);

index.route.js

import Route from 'ember-route';

export default Route.extend({
  model() {
    return {
      domain: {
        min: 0,
        max: 100
      },
      ranges: "red orange",
      test: 50,
      invert: 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="full form-group">
    <label for="ranges">量化范围 (range values)：</label>
    {{input id="ranges" class="form-control" value=model.ranges}}
  </section>
</div>

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

  <section class="form-group">
    <label for="invert">反转映射</label>
    {{input id="invert" type="checkbox" class="form-control" checked=model.invert}}
    <span class="help">{{if model.invert "开启" "关闭"}}</span>
  </section>
</div>


<div class="alert alert-error">
	<strong>
  	转换结果：{{scale model.test type="quantize"
  						domain=(array model.domain.min model.domain.max)
              range=(w model.ranges)
              invert=model.invert}}
  </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%;
}

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

.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": "*"
  }
}