diff --git a/src/components/graph/graph.js b/src/components/graph/graph.js index 997f66e8..a3e800dd 100644 --- a/src/components/graph/graph.js +++ b/src/components/graph/graph.js @@ -19,11 +19,6 @@ import { /* https://bl.ocks.org/mbostock/9078690 - quadtree for onClick / hover selections */ - -// set constants -const count = 39746 - - @connect((state) => { const vertices = state.cells.cells && state.cells.cells.data.graph ? state.cells.cells.data.graph : null; @@ -56,11 +51,13 @@ class Graph extends React.Component { }; } componentDidMount() { - // const {svg, ctx} = setupGraphElements( - // this.handleBrushSelectAction.bind(this), - // this.handleBrushDeselectAction.bind(this) - // ); - // this.setState({svg, ctx}); + const { + svg + } = setupGraphElements( + this.handleBrushSelectAction.bind(this), + this.handleBrushDeselectAction.bind(this) + ); + this.setState({svg}); // setup canvas and camera const camera = _camera(this.reglCanvas, {scale: true, rotate: false}); @@ -133,9 +130,13 @@ class Graph extends React.Component { const colors = []; const sizes = []; - const s = d3.scaleLinear() + const glScaleX = d3.scaleLinear() .domain([0,1]) - .range([-.95, .95]) /* padding */ + .range([-1, 1]) /* padding */ + + const glScaleY = d3.scaleLinear() + .domain([0,1]) + .range([1, -1]) /* padding */ /* Construct Vectors @@ -143,8 +144,8 @@ class Graph extends React.Component { _.each(nextProps.currentCellSelection, (cell, i) => { if (nextProps.graphMap[cell["CellName"]]) { /* fails silently, sometimes this is undefined, in which case the graph array should be shorter than the cell array, check in reducer */ positions.push([ - s(nextProps.graphMap[cell["CellName"]][0]), - s(nextProps.graphMap[cell["CellName"]][1]) + glScaleX(nextProps.graphMap[cell["CellName"]][0]), + glScaleY(nextProps.graphMap[cell["CellName"]][1]) ]) let c = cell["__color__"]; @@ -260,7 +261,7 @@ class Graph extends React.Component { >
- { this.reglCanvas = canvas}}/> + { this.reglCanvas = canvas}}/>
) diff --git a/src/globals.js b/src/globals.js index c3213afc..620b238b 100644 --- a/src/globals.js +++ b/src/globals.js @@ -58,8 +58,10 @@ export const maxParagraphWidth = 600; export const maxControlsWidth = 800; export const graphMargin = {top: 20, right: 10, bottom: 30, left: 40}; -export const graphWidth = 1440 /* window width */ - 410 /* sidebar */ - (15 + 15) /* left right padding */ /* but responsive */; -export const graphHeight = 500; +// export const graphWidth = 1440 /* window width */ - 410 /* sidebar */ - (15 + 15) /* left right padding */ /* but responsive */; +// export const graphHeight = 500; +export const graphWidth = 960; +export const graphHeight = 960; export const graphXScale = d3.scaleLinear() .domain([0, 1]) /* while this is the default for d3, our data is normalized so better to be explicit */