• Click into the drawing area to start the selection frame
  • move the mouse to resize the selection frame
  • Release the mouse button to resize the selection frame

(The circles are just for illustrating purposes)

See it live :

View selection
<!DOCTYPE html>
<meta charset="utf-8">
<title>d3.js selection frame example</title>
<link rel="stylesheet" href="app.css">
View file.ts
export abstract class Wrapper<T> {
constructor() {
console.log("type:", Reflect.getMetadata('design:type', this))
View package.json
"name": "xxx",
"version": "1.0.0",
"description": "xxx",
"repository": "none",
"main": "index.js",
"scripts": {
"prestart": "rimraf dist && cpx ./web/static/* dist/app",
"startold": "cross-env NODE_ENV=dev ts-node api/api.ts",
"start": "cross-env NODE_ENV=dev node fuse.js"
View fuse.js
const {
FuseBox, SassPlugin,
CSSPlugin, TypeScriptHelpers,
JSONPlugin, HTMLPlugin, SVGPlugin,
CSSResourcePlugin, Sparky,
} = require("fuse-box")
const homeDir = "./"
Sparky.task("clean", () => {
View app.tsx
// import "spectre.css/docs/dist/spectre.min.css"
import "./app.scss"
import * as React from "react@15.5.4"
import * as ReactDOM from "react-dom"
import { Router, Route, IndexRoute, hashHistory } from "react-router"
import { state } from "./accounts/state"
import { Login, Signup, CodeVerification, routes as accountRoutes } from "./accounts"
import { Board } from "./board/board"
import { TechSelector } from "./board/techselector"
// import * as Favicon from "react-favicon"