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).
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.
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:
![image](https://user-images.githubusercontent.com/15168778/86623676-32aa6100-bf7f-11ea-825f-3979e8dbd0cb.png)
Code snippet from codesandbox.io incase the link breaks:
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).