increases default hit area for Line

[nbond211]

Increases the default hit area for Line to be a width of 10px. (closes #33 )

Description

This changes the way the render method for Line works so that now it draws the line normally, and then if the strokeWidth is less than 10px, draws another transparent line with a strokeWidth of 10px.

Types of changes

• [ ] Bug fix (non-breaking change which fixes an issue)
• [x] New feature (non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to change)

Checklist

• [ ] I have documented all new methods.
• [ ] I have written tests for all new methods/functionality.
• [ ] I have written examples for all new methods/functionality.

[davelandry]

@nbond211 looking into this further, we need to approach it differently. take a look at this example code to see the error:

var data = [
  {id: "alpha", x: 0,   y0: 300, y1: 200},
  {id: "alpha", x: 150, y0: 100, y1: 0},
  {id: "alpha", x: 450, y0: 300, y1: 180},
  {id: "alpha", x: 700, y0: 140, y1: 40}
];

var line = new d3plus.Line()
  .data(data)
  .y(function(d) { return d.y0; })
  .label("An Example D3plus Area")
  .on("mousemove", () => console.log("move"))
  .render();

setTimeout(() => {
  var data2 = [
    {id: "alpha", x: 0,   y0: 300, y1: 200},
    {id: "alpha", x: 300, y0: 100, y1: 0},
    {id: "alpha", x: 600, y0: 300, y1: 180}
  ];
  line.data(data2).render();
}, 1000);

What's happening is this: the src/Shape/Shape.js component is managing the enter/update/exit cycle of the main shape group, which we shouldn't be modifying directly. Turns out, past-Dave actually hooked up a hitArea method which lets users define a custom hit area for shapes (currently only supports rectangle hitAreas). Check out this code.

So here's what I'm thinking:

• [x] override default hitArea in constructor of Line.js to return the hit area line's attributes
• [x] add support in Shape.js (line 515) to use "path" for Line and "rect" for others