d3 test

first d3 test try

by Sezer Ekinci

HTML

<script src="//d3js.org/d3.v4.min.js"></script>
<div id="chart-container"></div>

CSS

* {margin: 0;padding: 0;border: 0;}
svg {background: #fff;font-family: 'Lato', sans-serif;font-weight: 300;font-size: 12px;}
.box:hover {cursor:move}

#chart-container svg {background-color:#44444c}
.axis path {display: none;}
.axis line {stroke-opacity: 0.3;shape-rendering: crispEdges;stroke:#67676d;}
svg, #chart-container {width: 100%;height: 100vh;display: block;}

svg .grid text{fill:#888;}

JavaScript

var artboard = createPage('#chart-container');

createBox({
  width: 250,
  height: 50,
  x: 50,
  y: 50,
  ref: "app/groups",
  title: "#groupID",
  data: {
    _q:{
      ID: true
    },
    childs: {
      "firstName":{},
      "lastName":{},
      "age":{},
      "contact":{}
    }
  }
});
createBox({
  width: 250,
  height: 50,
  x: 150,
  y: 150,
  ref: "app/customers",
  title: "#customerID",
  data: {
    _q:{
      ID: true
    },
    childs: {
      "firstName":{},
      "lastName":{},
      "age":{},
      "contact":{}
    }
  }
});

/* Create Page */
function createPage(container){
  var containerStyle = document.querySelector(container).getBoundingClientRect();
  var svg = null,
      width = containerStyle.width,
      height = containerStyle.height,
      gX = null,
      gY = null,
      currentTransform = null,
      svg = d3.select("#chart-container").append('svg'),
      grid = svg.append("g").attr("class","grid"),
      view = svg.append("g").attr("class", "view");
  
  if (currentTransform) view.attr('transform', currentTransform);
  
  var xScale = d3.scaleLinear().domain([-width / 2, width / 2]).range([0, width]);
  var yScale = d3.scaleLinear().domain([-height / 2, height / 2]).range([height, 0]);
  
  var xAxis = d3.axisBottom(xScale)
    .ticks((width + 2) / (height + 2) * 10)
    .tickSize(height)
    .tickPadding(8 - height);
  var yAxis = d3.axisRight(yScale)
    .ticks(10)
    .tickSize(width)
    .tickPadding(8 - width);

  gX = grid.append("g")
    .attr("class", "axis axis--x")
    .call(xAxis);
  gY = grid.append("g")
    .attr("class", "axis axis--y")
    .call(yAxis);
  var artboard = view.append("g").attr("class","artboard");
  var zoom = d3.zoom()
  .scaleExtent([0.5, 5])
  .translateExtent([
    [-width * 2, -height * 2],
    [width * 2, height * 2]
  ])
  .on("zoom", zoomed);

  function zoomed() {
    currentTransform = d3.event.transform;
    view.attr("transform", currentTransform);
   ...