v4 support

Author: mathisonian

examples/app.css

@@ -0,0 +1,18 @@
+.axis path {
+  display: none;
+}
+
+.axis line {
+  stroke-opacity: 0.3;
+  shape-rendering: crispEdges;
+}
+
+.zoom {
+  fill: none;
+  pointer-events: all;
+}
+
+.view {
+  fill: none;
+  stroke: #000;
+}

examples/axis.js

@@ -2,7 +2,7 @@
 
 var d3 = require('d3');
 // Require the library and give it a reference to d3
-var Prerender = require('d3-pre');
+var Prerender = require('..');
 var prerender = Prerender(d3);
 
 
@@ -11,37 +11,34 @@ var prerender = Prerender(d3);
 // aware of SVGs that already exist on the page.
 prerender.start();
 
-
 var margin = {top: 20, right: 20, bottom: 30, left: 40},
     width = 960 - margin.left - margin.right,
     height = 500 - margin.top - margin.bottom;
 
-var x = d3.scale.linear()
+var x = d3.scaleLinear()
     .domain([-width / 2, width / 2])
     .range([0, width]);
 
-var y = d3.scale.linear()
+var y = d3.scaleLinear()
     .domain([-height / 2, height / 2])
     .range([height, 0]);
 
-var xAxis = d3.svg.axis()
+var xAxis = d3.axisBottom()
     .scale(x)
-    .orient("bottom")
     .tickSize(-height);
 
-var yAxis = d3.svg.axis()
+var yAxis = d3.axisLeft()
     .scale(y)
-    .orient("left")
     .ticks(5)
     .tickSize(-width);
 
-var zoom = d3.behavior.zoom()
-    .x(x)
-    .y(y)
+var zoom = d3.zoom()
+    // .x(x)
+    // .y(y)
     .scaleExtent([1, 32])
     .on("zoom", zoomed);
 
-var svg = d3.select("#interactive").append("svg")
+var svg = d3.select("body").append("svg")
     .attr("viewBox", ' 0 0 ' + (width + margin.left + margin.right) + ' ' + (height + margin.top + margin.bottom))
   .append("g")
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

examples/v4.js

@@ -0,0 +1,68 @@
+var d3 = require('d3');
+
+require('./app.css');
+// Require the library and give it a reference to d3
+var Prerender = require('..');
+var prerender = Prerender(d3);
+
+prerender.start();
+
+var svg = d3.select('body').append("svg").attr('width', 600).attr('height', 600),
+    width = +svg.attr("width"),
+    height = +svg.attr("height");
+
+var x = d3.scaleLinear()
+    .domain([-1, width + 1])
+    .range([-1, width + 1]);
+
+var y = d3.scaleLinear()
+    .domain([-1, height + 1])
+    .range([-1, height + 1]);
+
+var xAxis = d3.axisBottom(x)
+    .ticks((width + 2) / (height + 2) * 10)
+    .tickSize(height)
+    .tickPadding(8 - height);
+
+var yAxis = d3.axisRight(y)
+    .ticks(10)
+    .tickSize(width)
+    .tickPadding(8 - width);
+
+var view = svg.append("rect")
+    .attr("class", "view")
+    .attr("x", 0.5)
+    .attr("y", 0.5)
+    .attr("width", width - 1)
+    .attr("height", height - 1);
+
+var gX = svg.append("g")
+    .attr("class", "axis axis--x")
+    .call(xAxis);
+
+var gY = svg.append("g")
+    .attr("class", "axis axis--y")
+    .call(yAxis);
+
+svg.append("rect")
+    .attr("class", "zoom")
+    .attr("width", width)
+    .attr("height", height)
+
+
+prerender.stop();
+svg.call(d3.zoom()
+   .scaleExtent([1, 40])
+   .translateExtent([[-100, -100], [width + 90, height + 100]])
+   .on("zoom", zoomed));
+
+function zoomed() {
+  svg.select(".x.axis").call(xAxis);
+  svg.select(".y.axis").call(yAxis);
+}
+
+function zoomed() {
+  view.attr("transform", d3.event.transform);
+  gX.call(xAxis.scale(d3.event.transform.rescaleX(x)));
+  gY.call(yAxis.scale(d3.event.transform.rescaleY(y)));
+}

package.json

@@ -4,13 +4,16 @@
   "description": "Prerender SVGs with D3",
   "main": "index.js",
   "scripts": {
-    "test": "semistandard src/**/* && mocha test/test.js && mochify --transform brfs test/browser.js"
+    "test": "semistandard src/**/* && mocha test/test.js && mochify --transform brfs test/browser.js",
+    "example-axis": "budo examples/v4.js -- -t [ browserify-css --autoInject=true ]"
   },
   "author": "",
   "license": "MIT",
   "dependencies": {},
   "devDependencies": {
     "brfs": "^1.4.3",
+    "browserify-css": "^0.9.1",
+    "budo": "^9.0.0",
     "d3": "^4.2.2",
     "expect.js": "^0.3.1",
     "jsdom": "^3.1.2",

src/browser.js

@@ -1,6 +1,6 @@
 
 var dataString = 'data-pid';
-var modifiedAxis = require('./d3/axis');
+// var modifiedAxis = require('./d3/axis');
 var utils = require('./utils');
 
 module.exports = function (count) {

src/d3/axis.js

@@ -1,3 +1,4 @@
+console.log('axis,,,')
 var d3_svg_axisOrients = {
   top: 1,
   right: 1,

test/test.js

@@ -8,6 +8,8 @@ var jsdom = require('jsdom');
 var Prerender = require('..');
 var _ = require('lodash');
 
+console.log(d3);
+
 var cleanString = function (str) {
   return str.replace(/\s+/g, ' ').trim();
 };