Component exceeds its assigned dimensions

matanox commented 8 years ago

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 commented 8 years ago

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()

syntagmatic commented 8 years ago

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

syntagmatic / parallel-coordinates

Component exceeds its assigned dimensions #295