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();
  // - - - - - - - - - -
}());