Measuring Distances In Pixels

This block demonstrates some wonderfully useful functions of Geometric.js: lineAngle, lineLength, lineMidpoint, and pointTranslate.

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      margin: 0;
    }
    circle {
      stroke: #fff;
      cursor: move;
    }
    circle.selected {
      fill: steelblue;
    }
    .connector {
      stroke: #000;
      stroke-width: 4px;
    }
    .connector.selected {
      stroke: steelblue;
    }
    .length-line {
      stroke: #000;
      stroke-width: 1px;
    }
    .length-rect {
      fill: #fff;
    }
    text {
      font-family: "Helvetica Neue", sans-serif;
      text-anchor: middle;
    }
    .length-text.selected {
      fill: steelblue;
    }
    .label-text {
      fill: #888;
      font-size: .8em;
    }
  </style>
</head>
<body>
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <script src="https://unpkg.com/geometric@1.0.0/build/geometric.min.js"></script>
  <script>
    var first_draw = 1;

var width = 960, height = 500;
    var initial_separation = 200;
    var rect_width = 40, rect_height = 20;
    
    var data = [[-initial_separation + width / 2, height / 2], [initial_separation + width / 2, height / 2]], full_datum, half_datum, full_translate, half_translate;
    var angle = geometric.lineAngle([data[0], data[1]]);
    var full_distance = geometric.lineLength([data[0], data[1]]);
    var half_distance = full_distance / 2;

var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height);

var connector = svg.append("line").attr("class", "connector");

var full_length_g = svg.append("g");
    var full_length_line = full_length_g.append("line").attr("class", "length-line");
    var full_length_rect = full_length_g.append("rect").attr("class", "length-rect");
    var full_length_text_g = full_length_g.append("g");
    var full_length_text = full_length_text_g.append("text")
        .attr("class", "length-text")
        .attr("dx", rect_width / 2)
        .attr("dy", 6);
    full_length_text_g.append("text")
        .attr("class", "label-text")
        .attr("dx", rect_width / 2)
        .attr("dy", -10)
        .text("Full");

var half_length_g = svg.append("g");
    var half_length_line = half_length_g.append("line").attr("class", "length-line");
    var half_length_rect = half_length_g.append("rect").attr("class", "length-rect");
    var half_length_text_g = half_length_g.append("g");
    var half_length_text = half_length_text_g.append("text")
        .attr("class", "length-text")
        .attr("dx", rect_width / 2)
        .attr("dy", 6);
    half_length_text_g.append("text")
        .attr("class", "label-text")
        .attr("dx", rect_width / 2)
        .attr("dy", 22)
        .text("Half");

var instructions = svg.append("text")
        .attr("transform", "translate(" + [width / 2, -75 + height / 2] + ")")
        .text("Drag either point to start.");

var drag_generator = d3.drag()
      .on("start", _ => {
        if (first_draw){
          instructions.transition()
              .style("opacity", 1e-6)
              .remove();
          first_draw = 0;
        }

d3.selectAll("circle").classed("selected", 1);
        connector.classed("selected", 1);
        d3.selectAll(".length-text").classed("selected", 1);

})
      .on("drag", (d, i) => {
        data[i] = [event.pageX, event.pageY];
        angle = geometric.lineAngle([data[0], data[1]]);
        full_distance = geometric.lineLength([data[0], data[1]]);
        half_distance = full_distance / 2;

draw();
      })
      .on("end", _ => {
        d3.selectAll("circle").classed("selected", 0);
        connector.classed("selected", 0);
        d3.selectAll(".length-text").classed("selected", 0);
      });

draw();
        
    function draw(){
      var points = svg.selectAll("circle")
          .data(data);
      
      points.enter().append("circle")
          .attr("class", (d, i) => "circle-" + i)
          .attr("r", 8)
        .merge(points)
          .attr("transform", d => "translate(" + d + ")")
          .call(drag_generator);
      
      connector
          .datum(data)
          .attr("x1", d => d[0][0])
          .attr("y1", d => d[0][1])
          .attr("x2", d => d[1][0])
          .attr("y2", d => d[1][1]);

full_datum = data.map(d => geometric.pointTranslate(d, angle - 90, 20));
      full_translate = d => geometric.pointTranslate(geometric.lineMidpoint([d[0], d[1]]), angle - 180, rect_width / 2)

full_length_line
          .datum(full_datum)
          .attr("x1", d => d[0][0])
          .attr("y1", d => d[0][1])
          .attr("x2", d => d[1][0])
          .attr("y2", d => d[1][1]);

full_length_rect
          .datum(full_datum)
          .attr("width", rect_width)
          .attr("height", rect_height)
          .attr("transform", d => "translate(" + full_translate(d) + ") rotate(" + angle + ")")
          .attr("y", -rect_height / 2);

full_length_text_g
          .datum(full_datum)
          .attr("transform", d => "translate(" + full_translate(d) + ") rotate(" + angle + ")");
      
      full_length_text
          .text(Math.round(full_distance));
      
      half_datum = [data[0], geometric.lineMidpoint([data[0], data[1]])].map(d => geometric.pointTranslate(d, angle - 90, -20));
      half_translate = d => geometric.pointTranslate( geometric.lineMidpoint([d[0], d[1]]), angle - 180, rect_width / 2 );

half_length_line
          .datum(half_datum)
          .attr("x1", d => d[0][0])
          .attr("y1", d => d[0][1])
          .attr("x2", d => d[1][0])
          .attr("y2", d => d[1][1]);

half_length_rect
          .datum(half_datum)
          .attr("width", rect_width)
          .attr("height", rect_height)
          .attr("transform", d => "translate(" + half_translate(d) + ") rotate(" + angle + ")")
          .attr("y", -rect_height / 2);

half_length_text_g
          .datum(half_datum)
          .attr("transform", d => "translate(" + half_translate(d) + ") rotate(" + angle + ")");

half_length_text
          .text(Math.round(half_distance));
    }
  </script>
</body>
</html>

https://d3js.org/d3.v5.min.js

https://unpkg.com/geometric@1.0.0/build/geometric.min.js