Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Component exceeds its assigned dimensions #295

Open
matanox opened this issue Apr 8, 2016 · 2 comments
Open

Component exceeds its assigned dimensions #295

matanox opened this issue Apr 8, 2016 · 2 comments

Comments

@matanox
Copy link

matanox commented Apr 8, 2016

This is really a great implementation.
It seems that the svg element created by the library, under the div provided to it a la var parcoords = d3.parcoords()("#parCoords"), exceeds the pixel size of the host div. This stands in the way of elegantly embedding the component in elaborate pages when layout precision is important. E.g. it is very hard or impossible to hack a perfect viewport fit like this, in pages that are tailored to fit the entire viewport.

This is meant when providing the div's dimensions to the api's width and height, in the hope of getting the component drawn within the provided dimensions.
@matanox
Copy link
Author

matanox commented Apr 8, 2016

I think most demo pages do not hit this as they do not try to optimize screen estate. But embedding the component in a page that tries to (elegantly) maximize display estate, and the liberal sizing gets prohibitive... I think we can see the effect even on highly polished pages the use it such as https://sensortower.com/visualizing-the-ios-app-store.

I believe it should be directly observable when using percent sizing of the containing div:

<html style="margin: 0px; height: 100%">
<body style="margin: 0px; height: 100%">
    <div id="parCoords" class="parcoords" style="height: 74%; padding: 1%"></div>
    <div id="controls" style="height: 25%">
        <p>
          <label for="sltBrushMode">Select Mode:</label>
          <select id="sltBrushMode">
          </select>
          <label id="lblPredicate" for="sltPredicate">Multi Selects Operation:</label>
          <select id="sltPredicate">
            <option>intersection</option>
            <option>union</option>
          </select>
          <button id="btnReset">Reset</button>
        </p>
    </div>
</body>
</html>

Using the parallel coordinates height and width api to provide the desired dimensions like so:

  parcoords
    .width(document.getElementById("parCoords").clientWidth)
    .height(document.getElementById("parCoords").clientHeight)
    .render()

@matanox matanox changed the title component exceeds its assigned div size Component exceeds its assigned dimensions Apr 8, 2016
@syntagmatic
Copy link
Owner

One of the sizing issues, a ~2px larger canvas than the container, is an extra buffer for stroke widths on the polylines. Without it, strokes along the bottom of the canvas get clipped.

A way to resolve that is to have all the scales use a max range which is the height minus the buffer size (height-2 for example).

See the innerHeight variable in this example

http://bl.ocks.org/syntagmatic/c9fb69e425a3c07cfbd09169941fbf46

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@syntagmatic @matanox