Resizing axes when window is resized.

[jmgelman]

I'm having a heck of a time figuring out how to implement this. Basically, when the browser window is resized, I want the plot to update its height to the new height of the window. Is this possible?

Below is one of the ways I tried to do this (based on what was mentioned in #98), but to no avail. Also, a fiddle.

script.js:

var data = [
  [0, -0, 0, 0, 0, 3],
  [1, -1, 1, 2, 1, 6],
  [2, -2, 4, 4, 0.5, 2],
  [3, -3, 9, 6, 0.33, 4],
  [4, -4, 16, 8, 0.25, 9],
  [5, -5, 25, 10, 0.15, 11],
  [6, -6, 32, 9, 0.5, 15]
];

var pc = d3.parcoords()("#example")
  .height(window.innerHeight)
  .data(data)
  .dimensions({
    "0": {
      title: "Lorem"
    },
    "1": {
      title: "Ipsum"
    },
    "2": {
      title: "Dolor"
    }
  })
  .render()
  .brushMode("1D-axes")

$(window).on("resize", function() {
  pc.height(window.innerHeight);
  pc.resize();
  pc.render();
})

plot.html:

<div id="example" class="parcoords">
</div>

plot.css:

body,
#example {
  height: 100%;
}

The idea here being to make the plot somewhat responsive.

Many thanks for any suggestions.