Components Interactions Examples Tutorials API FAQ

Y Drag

var xScale = new Plottable.Scales.Linear();
var yScale = new Plottable.Scales.Linear();
var xAxis = new Plottable.Axes.Numeric(xScale, "bottom");
var yAxis = new Plottable.Axes.Numeric(yScale, "left");

var data = [];
for (var i = 0; i < 20; i++) { data.push({"x": i, "y": Math.random()}); }

var plot = new Plottable.Plots.Bar("horizontal")
  .x(function(d) { return d.y; }, xScale)
  .y(function(d) { return d.x; }, yScale)
  .addDataset(new Plottable.Dataset(data));

var dragbox = new Plottable.Components.YDragBoxLayer();
dragbox.onDrag(function(box) {
  plot.selections().attr("fill", "#5279c7");
  plot.entitiesIn(box).forEach(function(entity) {
    d3.select(entity.selection[0][0]).attr("fill", "#FD373E");
  });
});

new Plottable.Components.Table([
  [yAxis, new Plottable.Components.Group([dragbox, plot])],
  [null, xAxis]
]).renderTo("svg#example");
Inherits from DragBoxLayer

Public Methods