D3.js Simple Line

Test for simple line

by k_sav

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<div class="c-graph__canvas" data-graph-options='{"type": "fytd", "year": "14-15", "funds": ["Balanced", "High Growth", "Socially Aware"]}'></div>

CSS

body {
  margin: 0;
  padding: 0;
  width: 100%;
}

.c-graph__canvas {
  width: 100%;
}

.c-graph__tooltip {
  //min-width: 90px;
  width: 90px;
  position: absolute;
  padding: 10px;
  font: 12px sans-serif;
  border: 1px solid #616161;
  border-radius: 8px;
  pointer-events: none;
  z-index: 10;
  background: white;
  line-height: 1.4;
  margin-top: -23px;
  margin-left: 20px;
}

.c-graph__tooltip--right {
  margin-left: -130px;
}

.c-graph__tooltip-num {
  font-weight: 600;
}

.c-graph__tooltip-color {
  display: inline-block;
  vertical-align: top;
  width: 4px;
  height: 12px;
  background: black;
  margin-right: 3px;
}

.tip {
  width: 0;
  height: 0;
  position: absolute;
  left: -20px;
  top: 11px;
  border: solid 10px;
  border-color: transparent #616161 transparent transparent;
}

.c-graph__tooltip--right .tip {
  left: auto;
  right: -20px;
  border-color: transparent transparent transparent #616161;
}

.tip:after {
  content: ' ';
  width: 0;
  height: 0;
  position: absolute;
  left: -9px;
  top: -10px;
  border: solid 10px;
  border-color: transparent #fff transparent transparent;
}

.c-graph__tooltip--right .tip:after {
  left:auto;
  right: -9px;
  border-color: transparent transparent transparent #fff;
}

.c-graph__tooltip-top-row {
  //margin-bottom: 5px;
}

.c-graph__tooltip-name,
.c-graph__tooltip-date {
  margin: 0; 
}

// Mobile styles
//.axis--x .tick text {
  //transform: rotate(-65deg);
  //transform: rotate(0);
//}

.tick text {
    // desktop
    //font-size: 16px;
    // mobile
    //font-size: 10px;
    // dove-gray
    fill: #616161;
}

.clonedImage path,
.clonedImage circle {
    //pointer-events: none;
}

JavaScript

d3.selection.prototype.moveToFront = function() {
  return this.each(function() {
    this.parentNode.appendChild(this)
  })
}


function getWindowWidth() {
  const width = document.getElementsByClassName("c-graph__canvas")[0].clientWidth
  return width
}

function getWindowHeight() {
  return window.innerHeight
}

function isMobileVersion() {
  if (getWindowWidth() < SETTINGS.width.tablet) {
    console.log('is mobile')
    return true
  }
  console.log('is not mobile')
  return false
}

const SETTINGS = {
  margin: {
    top: 10,
    right: 10,
    bottom: 15,
    left: 30,
  },
  yAxisPadding: 1,
  width: {
    mobile: 320,
    tablet: 740,
  },
  colors: {
    axisLine: '#e4e4e4',
    axisLineZero: '#e4e4e4',
    bg: 'white',
    funds: {
      'High Growth': '#00A4E7',
      'Balanced': '#F36205',
      'Socially Aware': '#C9520D',
      'Indexed Diversified': '#E1EDFA',
      'Conservative Balanced': '#C0DBF3',
      'Stable': '#F14432',
      'Capital Guaranteed': '#FFC700',
      'Australian Shares': '#EF7F00',
      'International Shares': '#D0D0CE',
      'Property': '#86CCBC',
      'Diversified Fixed Interest': '#C6ABD1',
      'Cash': '#BC032A',
    },
  },
  axis_zero_width: 1,
  graphLine: {
    width: {
      up:2,
      over:4,
    },
  },
  dot: {
    radius: 6,
    strokeWidth: 2,
  }
}




// Append SVG element to our DIV
const canvas = d3.select('.c-graph__canvas')
const svg = canvas.append('svg')

const graphOptions = JSON.parse(canvas.attr('data-graph-options'))
const filterOptions = graphOptions.funds

//console.log(filterOptions)




svg
  .style('background', SETTINGS.colors.bg)
  .attr('preserveAspectRatio', 'none')


function setSvgDimensions() {
  svg
    .attr('width', getWindowWidth())
    .attr('height', getWindowHeight())
}
//setSvgDimensions()

// Calculate width and height of actual graph to 
function getGraphWidth() {
  return getWindowWidth() - SETTINGS.margin.left - SETTINGS.margin.right
}

function getGraphHeight() {
 ...