D3.js single axis

by Patrick Brockmann

HTML

<div id="chart"></div>

CSS

.axis path, .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
}

rect.zoom.x {
    cursor: col-resize;
}

rect.zoom.y {
    cursor: row-resize;
}

JavaScript

// http://bl.ocks.org/jgbos/9752277

  var ex_chart = example().zoom(true);
  
  var data = [];
  for (var i = 0; i < 100; i++) {
    data.push([Math.random(), Math.random()]);
  }
  d3.select('#chart')
  .append("svg").attr("width", window.innerWidth).attr("height",window.innerHeight)
  .datum(data).call(ex_chart);
  
  function example() {
    var svg;
    var margin = {
      top: 60,
      bottom: 80,
      left: 60,
      right: 0
    };
    var width = 500;
    var height = 400;
    var xaxis = d3.svg.axis();
    var yaxis = d3.svg.axis();
    var xscale = d3.scale.linear();
    var yscale = d3.scale.linear();
    var zoomable = true;
  
  
    var xyzoom = d3.behavior.zoom()
      .x(xscale)
      .y(yscale)
      .on("zoom", zoomable ? draw : null);
    var xzoom = d3.behavior.zoom()
      .x(xscale)
      .on("zoom", zoomable ? draw : null);
    var yzoom = d3.behavior.zoom()
      .y(yscale)
      .on("zoom", zoomable ? draw : null);
  
    function chart(selection) {
      selection.each(function(data) {
        svg = d3.select(this).selectAll('svg').data([data]);
        svg.enter().append('svg');
        var g = svg.append('g')
          .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  
        g.append("defs").append("clipPath")
          .attr("id", "clip")
          .append("rect")
          .attr("width", width - margin.left - margin.right)
          .attr("height", height - margin.top - margin.bottom);
  
        g.append("svg:rect")
          .attr("class", "border")
          .attr("width", width - margin.left - margin.right)
          .attr("height", height - margin.top - margin.bottom)
          .style("stroke", "black")
          .style("fill", "none");
  
        g.append("g").attr("class", "x axis")
          .attr("transform", "translate(" + 0 + "," + (height - margin.top - margin.bottom) + ")");
  
        g.append("g").attr("class", "y axis");
  
        g.append("g")
          .attr("class", "scatter")
      ...