d3.line(x,y) and d3.are(x,y0,y1) shorthand notations

fixes #159

README.md

@@ -351,9 +351,9 @@ The pad angle here means the angular separation between each adjacent arc. The t
 
 The line generator produces a [spline](https://en.wikipedia.org/wiki/Spline_\(mathematics\)) or [polyline](https://en.wikipedia.org/wiki/Polygonal_chain), as in a line chart. Lines also appear in many other visualization types, such as the links in [hierarchical edge bundling](https://observablehq.com/@d3/hierarchical-edge-bundling).
 
-<a name="line" href="#line">#</a> d3.<b>line</b>() · [Source](https://github.com/d3/d3-shape/blob/master/src/line.js), [Examples](https://observablehq.com/@d3/d3-line)
+<a name="line" href="#line">#</a> d3.<b>line</b>([<i>x</i>][, <i>y</i>]) · [Source](https://github.com/d3/d3-shape/blob/master/src/line.js), [Examples](https://observablehq.com/@d3/d3-line)
 
-Constructs a new line generator with the default settings.
+Constructs a new line generator with the default settings. If *x* or *y* are specified, sets the corresponding accessors to the specified function or number and returns this line generator.
 
 <a name="_line" href="#_line">#</a> <i>line</i>(<i>data</i>) · [Source](https://github.com/d3/d3-shape/blob/master/src/line.js), [Examples](https://observablehq.com/@d3/d3-line)
 
@@ -459,9 +459,9 @@ Equivalent to [*line*.context](#line_context).
 
 The area generator produces an area, as in an area chart. An area is defined by two bounding [lines](#lines), either splines or polylines. Typically, the two lines share the same [*x*-values](#area_x) ([x0](#area_x0) = [x1](#area_x1)), differing only in *y*-value ([y0](#area_y0) and [y1](#area_y1)); most commonly, y0 is defined as a constant representing [zero](http://www.vox.com/2015/11/19/9758062/y-axis-zero-chart). The first line (the <i>topline</i>) is defined by x1 and y1 and is rendered first; the second line (the <i>baseline</i>) is defined by x0 and y0 and is rendered second, with the points in reverse order. With a [curveLinear](#curveLinear) [curve](#area_curve), this produces a clockwise polygon.
 
-<a name="area" href="#area">#</a> d3.<b>area</b>() · [Source](https://github.com/d3/d3-shape/blob/master/src/area.js)
+<a name="area" href="#area">#</a> d3.<b>area</b>([<i>x</i>][, <i>y0</i>][, <i>y1</i>]) · [Source](https://github.com/d3/d3-shape/blob/master/src/area.js)
 
-Constructs a new area generator with the default settings.
+Constructs a new area generator with the default settings. If *x*, *y0* or *y1* are specified, sets the corresponding accessors to the specified function or number and returns this area generator.
 
 <a name="_area" href="#_area">#</a> <i>area</i>(<i>data</i>) · [Source](https://github.com/d3/d3-shape/blob/master/src/area.js)
 

src/area.js

@@ -5,16 +5,17 @@ import curveLinear from "./curve/linear.js";
 import line from "./line.js";
 import {x as pointX, y as pointY} from "./point.js";
 
-export default function() {
-  var x0 = pointX,
-      x1 = null,
-      y0 = constant(0),
-      y1 = pointY,
+export default function(x0, y0, y1) {
+  var x1 = null,
       defined = constant(true),
       context = null,
       curve = curveLinear,
       output = null;
 
+  x0 = typeof x0 === "function" ? x0 : (x0 === undefined) ? pointX : constant(+x0);
+  y0 = typeof y0 === "function" ? y0 : (y0 === undefined) ? constant(0) : constant(+y0);
+  y1 = typeof y1 === "function" ? y1 : (y1 === undefined) ? pointY : constant(+y1);
+
   function area(data) {
     var i,
         j,

src/line.js

@@ -4,14 +4,15 @@ import constant from "./constant.js";
 import curveLinear from "./curve/linear.js";
 import {x as pointX, y as pointY} from "./point.js";
 
-export default function() {
-  var x = pointX,
-      y = pointY,
-      defined = constant(true),
+export default function(x, y) {
+  var defined = constant(true),
       context = null,
       curve = curveLinear,
       output = null;
 
+  x = typeof x === "function" ? x : (x === undefined) ? pointX : constant(x);
+  y = typeof y === "function" ? y : (y === undefined) ? pointY : constant(y);
+
   function line(data) {
     var i,
         n = (data = array(data)).length,

test/area-test.js

@@ -16,6 +16,17 @@ tape("area() returns a default area shape", function(test) {
   test.end();
 });
 
+tape("area(x, y0, y1) sets x0, y0 and y1", function(test) {
+  var x = function() {}, y = function() {};
+  test.equal(shape.area(x).x0(), x);
+  test.equal(shape.area(x, y).y0(), y);
+  test.equal(shape.area(x, 0, y).y1(), y);
+  test.equal(shape.area(3, 2, 1).x0()("aa"), 3);
+  test.equal(shape.area(3, 2, 1).y0()("aa"), 2);
+  test.equal(shape.area(3, 2, 1).y1()("aa"), 1);
+  test.end();
+});
+
 tape("area.x(f)(data) passes d, i and data to the specified function f", function(test) {
   var data = ["a", "b"], actual = [];
   shape.area().x(function() { actual.push([].slice.call(arguments)); })(data);

test/line-test.js

@@ -14,6 +14,15 @@ tape("line() returns a default line shape", function(test) {
   test.end();
 });
 
+tape.only("line(x, y) sets x and y", function(test) {
+  var x = function() {}, y = function() {};
+  test.equal(shape.line(x).x(), x);
+  test.equal(shape.line(x, y).y(), y);
+  test.equal(shape.line(3, 2).x()("aa"), 3);
+  test.equal(shape.line(3, 2).y()("aa"), 2);
+  test.end();
+});
+
 tape("line.x(f)(data) passes d, i and data to the specified function f", function(test) {
   var data = ["a", "b"], actual = [];
   shape.line().x(function() { actual.push([].slice.call(arguments)); })(data);