Top-bottom distribution & label optimization is broken?

[nora-white]

Having difficulty getting data to distribute correctly. Even on the observable website, it still doesn't distribute correctly. Attempted in Chrome and in Firefox. Running on Mac. Please see attached codesandbox: https://codesandbox.io/s/amazing-surf-1pp2u Here are screenshots to show what I'm seeing:

Code snippet from codesandbox.io incase the link breaks:

import "./styles.css";
import milestones from "d3-milestones/src/main";

export default function App() {
  const renderTimeLine = node => {
    const m = document.getElementById("timeline");
    m.style.height = "500px";
    m.style.width = "700px";
    m.style.margin = "auto";
    m.style.padding = "1px";
    setTimeout(() => {
      const ms = milestones("#timeline")
        .mapping({
          timestamp: "year",
          text: "title"
        })
        .parseTime("%Y")
        .aggregateBy("year")
        .optimize(true)
        .distribution("top-bottom")
        .render([
          { year: 789, title: "Vikings begin attacks on England." },
          { year: 840, title: "Vikings found Dublin in Ireland." },
          { year: 860, title: "Rus Vikings attack Constantinople." },
          {
            year: 866,
            title: "Danish Vikings establish a kingdom in York, England."
          },
          { year: 871, title: "Danish advance is halted in England." },
          { year: 872, title: "Harald I gains control of Norway." }
        ]);
    }, 0);
  };

  return (
    <div className={"container"}>
      <div
        id={"timeline"}
        ref={renderTimeLine}
      />
    </div>
  );
}

Any suggestions to help me out? I'm unsure what I'm doing wrong. For my specific scenario as well, we often have around 8 dates to display. With many of the right-most dates looking cramped and unreadable (Exactly like in the screenshots).

[walterra]

• I fixed the observable example, unfortunately the CSS file needs to be updated there manually to use the latest CSS from beta1.
• When I use the latest CSS the codesandbox example works too.
• Unfortunately having a lot of items on the very right causes issues with the layout algorithm. I don't have a quick fix but will try to think of something.

[walterra]

I made some more layout optimizations, it should now be more stable with more labels to the far right.

Before:

After:

This will be part of the 1.0.0 release.