fix arrow (#833)

* add test

* remove arrows with a non-positive length
fixes inset bug
closes #832

* tweak test style

* M for matrix

Co-authored-by: Mike Bostock <[email protected]>

Author: Fil

src/marks/arrow.js

@@ -76,8 +76,9 @@ export class Arrow extends Mark {
               // The start ⟨x1,y1⟩ and end ⟨x2,y2⟩ points may be inset, and the
               // ending line angle may be altered for inset swoopy arrows.
               let x1 = X1[i], y1 = Y1[i], x2 = X2[i], y2 = Y2[i];
-              let lineAngle = Math.atan2(y2 - y1, x2 - x1);
               const lineLength = Math.hypot(x2 - x1, y2 - y1);
+              if (lineLength <= insetStart + insetEnd) return null;
+              let lineAngle = Math.atan2(y2 - y1, x2 - x1);
 
               // We don’t allow the wing length to be too large relative to the
               // length of the arrow. (Plot.vector allows arbitrarily large
@@ -156,7 +157,7 @@ function pointPointCenter([ax, ay], [bx, by], r, sign) {
 function circleCircleIntersect([ax, ay, ar], [bx, by, br], sign) {
   const dx = bx - ax, dy = by - ay, d = Math.hypot(dx, dy);
   const x = (dx * dx + dy * dy - br * br + ar * ar) / (2 * d);
-  const y = sign * Math.sign(ay) * Math.sqrt(ar * ar - x * x);
+  const y = sign * Math.sqrt(ar * ar - x * x);
   return [ax + (dx * x + dy * y) / d, ay + (dy * x - dx * y) / d];
 }
 

test/output/markovChain.svg

@@ -80,6 +80,7 @@ export {default as letterFrequencyLollipop} from "./letter-frequency-lollipop.js
 export {default as letterFrequencyWheel} from "./letter-frequency-wheel.js";
 export {default as likertSurvey} from "./likert-survey.js";
 export {default as logDegenerate} from "./log-degenerate.js";
+export {default as markovChain} from "./markov-chain.js";
 export {default as metroInequality} from "./metro-inequality.js";
 export {default as metroInequalityChange} from "./metro-inequality-change.js";
 export {default as metroUnemployment} from "./metro-unemployment.js";

test/plots/index.js

@@ -0,0 +1,32 @@
+import * as Plot from "@observablehq/plot";
+import * as d3 from "d3";
+
+export default async function() {
+  const matrix = [[0.3, 0.2, 0.5], [0.1, 0.7, 0.2], [0.1, 0.1, 0.8]];
+  const centers = matrix.map((m, i) => d3.pointRadial((2 - i) * 2 * Math.PI / matrix.length, 100));
+  const factors = matrix.flatMap((m, i) => m.map((value, j) => ({i, j, value})));
+  return Plot.plot({
+    width: 400,
+    height: 380,
+    inset: 60,
+    axis: null,
+    marks: [
+      Plot.dot(centers, {r: 40}),
+      Plot.arrow(factors, {
+        x1: ({i}) => centers[i][0],
+        y1: ({i}) => centers[i][1],
+        x2: ({j}) => centers[j][0],
+        y2: ({j}) => centers[j][1],
+        strokeOpacity: "value",
+        bend: true,
+        inset: 55
+      }),
+      Plot.text(centers, {text: ["A", "B", "C"], dy: 55}),
+      Plot.text(factors, {
+        x: ({i, j}) => (centers[i][0] + centers[j][0]) / 2 + (centers[i][1] - centers[j][1]) * 0.16,
+        y: ({i, j}) => (centers[i][1] + centers[j][1]) / 2 - (centers[i][0] - centers[j][0]) * 0.16,
+        text: "value"
+      })
+    ]
+  });
+}