Ein Koordinatensystem für D3

… und ein wenig Codestruktur. 

Koordinaten braucht es für die meisten Diagramme. Es liegt also nahe, ein wiederverwendbares bzw. einfach zu konfigurierendes zu haben. Im folgenden zeige ich, wie es geht:

// files
d3-template.html
assets/css/d3-template.css
assets/js/d3-template.js

d3-template.html

Getrennte Files für HTML, CSS und Javascript.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>D3 Basic Template</title>
    <link rel="stylesheet" href="assets/css/d3-template.css">
    <script src="https://d3js.org/d3.v5.min.js" charset="utf-8"></script>
  </head>
  <body>
    <h1>D3 Template with Axes</h1>
    <main id="diagram"></main>
    <script src="assets/js/d3-template.js" charset="utf-8"></script>
  </body>
</html>

d3-template.css

/**
 * styles for D3 Basics
 * @author Michael
 * @since 2018/07/11
 */

html {
  color: hsla(360, 0%, 100%, 1);
  background-color: hsla(360, 0%, 10%, 1);
}

svg {
  border-color: lightsteelblue;
  border-width: 5px;
  border-style: solid;
}

circle, rect {
  stroke: lsteelblue;
  stroke-width: 1px;
  fill: white;
}

text {
  fill: white;
}

svg .domain {
  fill: none;
  stroke: white;
  stroke-width: 2px;
}

svg .tick line {
  fill: none;
  stroke: white;
  stroke-width: 2px;
}

svg .tick text {
  fill: white;
  font-family: monospace;
}

svg path {
  fill: hsla(360, 0%, 30%, 1);
  stroke: white;
  stroke-width: 1px;
}

d3-template.js

/**
 * Some Axes ...
 * @author Michael
 * @since 2018/07/11
 */
!(function () {
  'use strict';
  // - - - - - - - - - -
  // declaration
  let
    canvas = undefined,
    svg = undefined,
    scale = undefined,
    xScale = undefined,
    yScale = undefined,
    w = undefined,
    h = undefined,
    tx = undefined,
    ty = undefined,
    f = undefined,

    setCanvas = undefined,
    setXScale = undefined,
    setYScale = undefined,
    setXAxis = undefined,
    setYAxis = undefined;

  // head section
  canvas = {
    width: 400,
    height: 400,
    viewbox: {
      x: 0,
      y: 0,
      width: 400,
      height: 400
    },
    padding: {
      top: 20,
      right: 20,
      bottom: 30,
      left: 40
    }
  }
  scale = {
    xAxis: {
      domain: {
        from: 0,
        to: 100
      },
      range: {
        start: canvas.padding.left,
        end: canvas.width - canvas.padding.right
      }
    },
    yAxis: {
      domain: {
        from: 5,
        to: 0
      },
      range: {
        start: canvas.padding.top,
        end: canvas.height - canvas.padding.bottom
      }
    }
  };

  // methods
  setCanvas = function (contextSelector) {
    svg = d3.select(contextSelector)
      .append('svg')
      .attr('width', canvas.width)
      .attr('height', canvas.height)
      .attr('viewbox', canvas.viewbox.x + ' ' + canvas.viewbox.y + ' ' + canvas.viewbox.width + ' ' + canvas.viewbox.height)
  };

  setXScale = function () {
    xScale = d3.scaleLinear()
      .domain([scale.xAxis.domain.from, scale.xAxis.domain.to])
      .range([scale.xAxis.range.start, scale.xAxis.range.end]);
  };

  setYScale = function () {
    yScale = d3.scaleLinear()
      .domain([scale.yAxis.domain.from, scale.yAxis.domain.to])
      .range([scale.yAxis.range.start, scale.yAxis.range.end]);
  };

  setXAxis = function () {
    let
      tx = 0,
      ty = canvas.height - canvas.padding.bottom;

    setXScale();

    svg.append('g')
      .attr('transform', 'translate(' + tx + ', ' + ty + ')')
      .call(d3.axisBottom(xScale));
  };

  setYAxis = function () {
    let
      tx = canvas.padding.left,
      ty = 0;

    setYScale();

    svg.append('g')
      .attr('transform', 'translate(' + tx + ', ' + ty + ')')
      .call(d3.axisLeft(yScale));
  };

  // control
  setCanvas('#diagram');
  setXAxis();
  setYAxis();
  // - - - - - - - - - -
}());