how to create d3 radial with dynamic radios

user_3919120 0
Viewed 94

I created a radial with two tiers of options. I did in a way that isn't really dynamic and isn't really responsive to screen size. I now need it to be both of those things. Here is what it looks like when on the screen size I designed it for. SCREENSHOT

I created a working demo on sandbox that has the dimensions set how I need to use it on. This is what it looks like. SCREENSHOT2

Here is link WORKING DEMO

any help is appreciated. Also keep in mind the outer tiers can have less or more options. it would be great if the blue toggle button would always align at the bottom of the radial like under the En of Energy Loss

d3.js reactjs svg geometry javascript
1 Answers

I would consider using an SVG ViewBox in order to maintain consistency. What this basically does is create a consistent scalable SVG, mapping the size and coordinates of its container into a consistent range inside the SVG.

For example:

<div height="400px" width="400px">
  <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="0" width="100%" height="100%" stroke="red" fill-opacity="0"/>
    <circle r="4" cx="10" cy="10"/>
  </svg>
</div>

So it basicalley creates a mapping from the 400x400 dimensions of the div, into the 100x100 of the svg, so the circle positioned at (10, 10) inside the svg will actually be in coordinates (40, 40) of the div

user_163846210
Related