search

ErikGartner / dTree

A library for visualizing data trees with multiple parents, such as family trees. Built on top of D3.
https://treehouse.gartner.io/ErikGartner/58e58be650453b6d49d7
MIT License
521 stars 139 forks source link

Question: Aligning the chart to the top and middle of the screen #67

Closed shobeck closed 6 years ago

shobeck commented 6 years ago

Hi!

I'm confused about how to align the chart to the top of the browser/div and centering it. Here's what I have for dTree settings:

const w = window.innerWidth; const h = window.innerHeight; ... width: w,height: h, margin: { top: 0, right: 0, bottom: 0, left: 0 }

With the above settings, the chart is translated to w/2 and 0. It is not viewable:

--> builder.js, line 33, d3.event.transform.translate(width / 2, opts.margin.top)); --> builder.js, line 43, 'translate(' + width / 2 + ',' + opts.margin.top + ')'

If I change the value of the margin.top to say -700, which brings the chart into view, the height of the SVG is now changed to something considerably smaller and it is still not visible.

--> builder.js, line 28, let height = opts.height + opts.margin.top + opts.margin.bottom;

I'm confused. Is this the right way to align the SVG? I'm missing something.

Any help is appreciated.

Sheila

ErikGartner commented 6 years ago

Aligning the actual SVG is best done from "the outside" using CSS like you would any other div or object. When initialising dTree the only thing you basically control is the size of the SVG.