D3 - Mouse Events

Simple D3 (and bootstrap) fiddle exploring how to inject some DOM elements and attach some mouse events. For more info regarding events checkout the [W3C Level 3 spec](https://www.w3.org/TR/DOM-Level-3-Events).

by brady houseknecht

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/darkly/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.js"></script>
<app></app>

CSS

body {
  padding: 10%;
}

.box-lime {
  border-width: 1px;
  border-color: lime;
  border-style: dashed;
  padding: 20px;
}

.box-turquoise {
  border-width: 1px;
  border-color: turquoise;
  border-style: dashed;
  padding: 20px;
}

.box-magenta {
  border-width: 1px;
  border-color: magenta;
  border-style: dashed;
  padding: 20px;
}

.box-deepskyblue {
  border-width: 1px;
  border-color: deepskyblue;
  border-style: dashed;
  padding: 20px;
}

JavaScript

(function(app, $, undefined) {
  "use strict";

  let metadata = {
    fiddleHeader: 'D3 - Events',
    urls: {
      github: 'https://github.com/bradyhouse/house/tree/master/fiddles/d3/fiddle-0027-Level3Events'
    },
    consoleTag: 'H O U S E ~ f i d d l e s'
  };


  function container() {

    d3.select("app")
      .append('div');

    d3.select("app")
      .select("div")
      .attr("class", "container-fluid box-lime");

  }

  function navbar() {
    d3.select("app")
      .select("div.container-fluid")
      .append("div");

    d3.select("app")
      .select(".container-fluid")
      .select("div")
      .attr("class", "navbar-header box-turquoise");

  }

  function ul() {
    d3.select("app")
      .select("div.navbar-header")
      .append("ul");

    d3.select("app")
      .select("ul")
      .attr("class", "nav navbar-nav box-magenta");
  }

  function li() {
    d3.select("app")
      .select("ul")
      .append("li");

    d3.select("app")
      .select("ul")
      .select("li")
      .attr("class", "btn btn-default box-deepskyblue");
  }

  function a() {
    d3.select("app")
      .select("li")
      .append('a');

    d3.select("app")
      .select('a')
      .attr('href', "#")
      .text('li');
  }

  function events() {
    d3.select("app")
      .select('a')
      .on('mouseover', () => {
        d3.select("app")
          .select("a")
          .text('li > mouseover');
      })
      .on('mousedown', () => {
        d3.select("app")
          .select("a")
          .text('li > mousedown');
      })
      .on('click', () => {
        d3.select("app")
          .select("a")
          .text('li > click');
      })
      .on('mouseout', () => {
        d3.select("app")
          .select("a")
          .text('li > mouseout');
      });

  }

  function configConsole() {
    console.log("%c" + metadata.consoleTag, 'font-style: italic; font-size: 20px;');
    console.log("%c" + metadata.urls.github, "color: blue; font-style: italic;...