{"action":"created","issue":{"url":"https://api.github.com/repos/brentvatne/react-native-svg/issues/6","labels_url":"https://api.github.com/repos/brentvatne/react-native-svg/issues/6/labels{/name}","comments_url":"https://api.github.com/repos/brentvatne/react-native-svg/issues/6/comments","events_url":"https://api.github.com/repos/brentvatne/react-native-svg/issues/6/events","html_url":"https://github.com/brentvatne/react-native-svg/issues/6","id":72524633,"number":6,"title":"Responsive SVGs","user":{"login":"jbhatab","id":2458718,"avatar_url":"https://avatars.githubusercontent.com/u/2458718?v=3","gravatar_id":"","url":"https://api.github.com/users/jbhatab","html_url":"https://github.com/jbhatab","followers_url":"https://api.github.com/users/jbhatab/followers","following_url":"https://api.github.com/users/jbhatab/following{/other_user}","gists_url":"https://api.github.com/users/jbhatab/gists{/gist_id}","starred_url":"https://api.github.com/users/jbhatab/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jbhatab/subscriptions","organizations_url":"https://api.github.com/users/jbhatab/orgs","repos_url":"https://api.github.com/users/jbhatab/repos","events_url":"https://api.github.com/users/jbhatab/events{/privacy}","received_events_url":"https://api.github.com/users/jbhatab/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":13,"created_at":"2015-05-01T21:12:37Z","updated_at":"2015-06-26T12:57:41Z","closed_at":null,"body":"I got D3 going and am making charts successfully, but the height width relationship is just crazy hard to understand. You set the height/width on the svg, in d3, and on the s3 container it seems. But getting it to responsively work with this relationship on every phone has not been working.\r\n\r\nHere's the code. \r\n```\r\nvar d3 = require('d3');\r\nvar jsdom = require('jsdom-jscore');\r\nvar React = require('react-native');\r\nvar { View, Text, StyleSheet, ScrollView, } = React;\r\nvar Svg = require('../../Svg');\r\nvar parseDate = d3.time.format(\"%d-%b-%y\").parse;\r\nvar _ = require('underscore');\r\nvar PerspectiveWebAPIUtils = require('../../../utils/perspective_web_api_utils')\r\nvar ListenerMixin = require('alt/mixins/ListenerMixin');\r\nvar TimerMixin = require('react-timer-mixin');\r\nvar PerspectiveStore = require('../../../stores/perspective_store')\r\n\r\nfunction getStateFromStores(id) {\r\n  return {\r\n    perspective: PerspectiveStore.find(id)\r\n  };\r\n}\r\n\r\nvar PerspectiveShow = React.createClass({\r\n  mixins: [ListenerMixin, TimerMixin],\r\n  getInitialState: function() {\r\n    return getStateFromStores(this.props.perspective.id);\r\n  },\r\n\r\n  componentDidMount() {\r\n    this.listenTo(PerspectiveStore, this._onChange);\r\n    PerspectiveWebAPIUtils.getShow(this.props.perspective.id)\r\n    this.loadDOM();\r\n  },\r\n\r\n  _onChange: function() {\r\n    this.setState(getStateFromStores(this.props.perspective.id));\r\n    this.loadDOM();\r\n  },\r\n\r\n  renderChart(window, el) {\r\n    var margin = {top: 20, right: 20, bottom: 30, left: 40};\r\n    var w = 600 - margin.left - margin.right,\r\n        h = 600 - margin.top - margin.bottom;\r\n\r\n    var data_size = this.state.perspective.efficiency_graph.data.length\r\n\r\n    var svg = d3.select(el).append('svg')\r\n      .attr('xmlns', 'http://www.w3.org/2000/svg')\r\n      .attr('width', w + margin.left + margin.right)\r\n      .attr('height', h + margin.top + margin.bottom)\r\n      .append('g')\r\n      .attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');\r\n\r\n    var xScale = d3.scale.linear()\r\n      .domain([0, data_size])\r\n      .range([0, w]);\r\n\r\n\r\n    var xAxis = d3.svg.axis()\r\n      .scale(xScale)\r\n      .orient('bottom')\r\n      .ticks(5)\r\n      .innerTickSize(6)\r\n      .outerTickSize(12)\r\n      .tickPadding(12);\r\n\r\n    svg.append('g')\r\n      .attr('stroke', 'black')\r\n      .attr('stroke-width', '1px')\r\n      .attr('transform', 'translate(0, '+ (h + 0) + ')')\r\n      .call(xAxis)\r\n      .selectAll('path')\r\n      .style({'stroke': 'Black', 'fill': 'none', 'stroke-width': '1px'});\r\n\r\n    var yMax = _.max(this.state.perspective.efficiency_graph.data, (item)=>{ return item})\r\n\r\n    if( yMax < 100 ) {\r\n      yMax = 100\r\n    }\r\n\r\n    var yScale = d3.scale.linear()\r\n      .domain([0, yMax])\r\n      .range([h, 0]);\r\n\r\n    var yAxis = d3.svg.axis()\r\n      .scale(yScale)\r\n      .orient('left');\r\n\r\n    svg.append('g')\r\n      .attr('stroke', 'black')\r\n      .attr('stroke-width', '1px')\r\n      .attr('transform', 'translate(0, 0)')\r\n      .call(yAxis)\r\n      .selectAll('path')\r\n      .style({'stroke': 'Black', 'fill': 'none', 'stroke-width': '1px'});\r\n\r\n    svg.selectAll('rect')\r\n      .data(this.state.perspective.efficiency_graph.data)\r\n      .enter()\r\n      .append('rect')\r\n      .attr('fill', '#4485F3')\r\n      .attr('x', function (d, i) {\r\n        return (i * (w/data_size)+ 4);\r\n      })\r\n      .attr('y', function (d) {\r\n        return yScale(d);\r\n      })\r\n      .attr('width', ((w/data_size) - 4))\r\n      .attr('height', function (d) {\r\n        return h - yScale(d);\r\n      });\r\n    this.setState({data: el.innerHTML});\r\n  },\r\n\r\n  loadDOM(n) {\r\n    var self = this;\r\n\r\n    jsdom.env('<body></body>', function(errors, window) {\r\n      var el = window.document.querySelector('body');\r\n      self.renderChart(window, el);\r\n    })\r\n  },\r\n\r\n  render() {\r\n    if (this.state && this.state.data) {\r\n      return (\r\n        <ScrollView style={{paddingTop: 40}}>\r\n          <Svg width={600} height={600} style={{flex: 1, height: 400}} data={this.state.data} forceUpdate={(new Date()).toString()} />\r\n          <View style={ styles.line }></View>\r\n          <Svg width={600} height={600} style={{flex: 1, height: 400}} data={this.state.data} forceUpdate={(new Date()).toString()} />\r\n          <View style={ styles.line }></View>\r\n        </ScrollView>\r\n      )\r\n    } else {\r\n      return <ScrollView />\r\n    }\r\n  },\r\n\r\n});\r\n\r\nvar styles = StyleSheet.create({\r\n  container: {\r\n    flex: 1,\r\n    paddingTop: 400,\r\n    backgroundColor: '#F6F6EF',\r\n  },\r\n  line: {\r\n    flex: 1,\r\n    height: 1,\r\n    backgroundColor: 'green',\r\n  }\r\n});\r\n\r\nmodule.exports = PerspectiveShow;\r\n```\r\n\r\nHere's what it looks like on the iphone 4s, iphone 6, and iphone 6 plus. \r\n\r\n![ios simulator screen shot may 1 2015 4 08 41 pm](https://cloud.githubusercontent.com/assets/2458718/7437380/89786898-f01c-11e4-9ceb-6b9d154c2f04.png)\r\n![ios simulator screen shot may 1 2015 4 09 33 pm](https://cloud.githubusercontent.com/assets/2458718/7437382/897a6512-f01c-11e4-8f53-1a5329971a37.png)\r\n![ios simulator screen shot may 1 2015 4 10 02 pm](https://cloud.githubusercontent.com/assets/2458718/7437381/89796b08-f01c-11e4-9bbc-0962122c9de9.png)\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/brentvatne/react-native-svg/issues/comments/115671495","html_url":"https://github.com/brentvatne/react-native-svg/issues/6#issuecomment-115671495","issue_url":"https://api.github.com/repos/brentvatne/react-native-svg/issues/6","id":115671495,"user":{"login":"chroth7","id":6230368,"avatar_url":"https://avatars.githubusercontent.com/u/6230368?v=3","gravatar_id":"","url":"https://api.github.com/users/chroth7","html_url":"https://github.com/chroth7","followers_url":"https://api.github.com/users/chroth7/followers","following_url":"https://api.github.com/users/chroth7/following{/other_user}","gists_url":"https://api.github.com/users/chroth7/gists{/gist_id}","starred_url":"https://api.github.com/users/chroth7/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/chroth7/subscriptions","organizations_url":"https://api.github.com/users/chroth7/orgs","repos_url":"https://api.github.com/users/chroth7/repos","events_url":"https://api.github.com/users/chroth7/events{/privacy}","received_events_url":"https://api.github.com/users/chroth7/received_events","type":"User","site_admin":false},"created_at":"2015-06-26T12:57:41Z","updated_at":"2015-06-26T12:57:41Z","body":"@ColinUNCG to be honest, I haven't checked if my prototype is still running on the new react-native versions. But that sounds familiar, I think I had a similar issue with the node_modules directory at that time, I solved it with hint 1 in the installation notes (see readme):\r\nquote:\r\nyou might want to delete the contents of: ./node_modules/react-native-viewport/node_modules (I get problems building it because of recursive paths - even if I disable that)\r\n\r\ncan you check if that helps?"}}