apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request #52 from polyfractal/parallelcoordinates

Browse Source 
Parallel coordinates
pull/7/head
Zachary Tong 12 years ago
parent 0f3e64abf3 5d72a6337d
commit eea4232564
3 changed files with 388 additions and 417 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 13
      panels/parallelcoordinates/editor.html
  2. 17
      panels/parallelcoordinates/module.html
  3. 775
      panels/parallelcoordinates/module.js

13
panels/parallelcoordinates/editor.html
Unescape View File

@ -7,19 +7,6 @@
</form> </form>
</div> </div>
</div> </div>
<div class="row-fluid">
<div class="span4">
<form class="input-append">
<h6>Add field</h6>
<input bs-typeahead="fields.list" type="text" class="input-small" ng-model='newfield'>
<button class="btn" ng-click="toggle_field(newfield);newfield=''"><i class="icon-plus"></i></button>
</form>
</div>
<div class="span8">
<h6>Selected fields <small>Click to remove</small></h6>
<span style="margin-left:3px" ng-click="toggle_field(field)" ng-repeat="field in $parent.panel.fields" class="label remove pointer">{{field}} </span>
</div>
</div>
<h5>Panel Spy</h5> <h5>Panel Spy</h5>
<div class="row-fluid"> <div class="row-fluid">
<div class="span2"> <div class="span2">

17
panels/parallelcoordinates/module.html
Unescape View File

@ -13,27 +13,10 @@
display:none display:none
} }
.legend {
font-size: 18px;
font-style: oblique;
}
.legend line { .legend line {
stroke-width: 2px; stroke-width: 2px;
} }
.setosa {
stroke: #800;
}
.versicolor {
stroke: #080;
}
.virginica {
stroke: #008;
}
.brush .extent { .brush .extent {
fill-opacity: .3; fill-opacity: .3;
stroke: #fff; stroke: #fff;

775
panels/parallelcoordinates/module.js
Unescape View File

@ -1,443 +1,444 @@
angular.module('kibana.parallelcoordinates', []) angular.module('kibana.parallelcoordinates', [])
.controller('parallelcoordinates', function ($scope, eventBus) { .controller('parallelcoordinates', function ($scope, eventBus) {
$scope.activeDocs = []; $scope.activeDocs = [];
// Set and populate defaults // Set and populate defaults
var _d = { var _d = {
query : "*", query : "*",
size : 100, // Per page size : 100, // Per page
pages : 5, // Pages available pages : 5, // Pages available
offset : 0, offset : 0,
sort : ['@timestamp','desc'], sort : ['@timestamp','desc'],
group : "default", group : "default",
style : {'font-size': '9pt'}, style : {'font-size': '9pt'},
fields : [], fields : [],
sortable: true, sortable: true,
spyable: true spyable: true
}
_.defaults($scope.panel, _d)
$scope.init = function () {
$scope.set_listeners($scope.panel.group);
// Now that we're all setup, request the time from our group
eventBus.broadcast($scope.$id,$scope.panel.group,"get_time")
//and get the currently selected fields
eventBus.broadcast($scope.$id,$scope.panel.group,"get_fields")
};
$scope.set_listeners = function(group) {
eventBus.register($scope,'time',function(event,time) {
$scope.panel.offset = 0;
set_time(time)
});
eventBus.register($scope,'query',function(event,query) {
$scope.panel.offset = 0;
$scope.panel.query = _.isArray(query) ? query[0] : query;
$scope.get_data();
});
eventBus.register($scope,'sort', function(event,sort){
$scope.panel.sort = _.clone(sort);
$scope.get_data();
});
eventBus.register($scope,'selected_fields', function(event, fields) {
$scope.panel.fields = _.clone(fields)
$scope.$emit('render');
});
};
$scope.get_data = function (segment,query_id) {
// Make sure we have everything for the request to complete
if (_.isUndefined($scope.panel.index) || _.isUndefined($scope.time))
return;
var _segment = _.isUndefined(segment) ? 0 : segment
$scope.segment = _segment;
$scope.panel.loading = true;
var request = $scope.ejs.Request().indices($scope.panel.index[_segment])
.query(ejs.FilteredQuery(
ejs.QueryStringQuery($scope.panel.query || '*'),
ejs.RangeFilter($scope.time.field)
.from($scope.time.from)
.to($scope.time.to)
)
)
.size($scope.panel.size*$scope.panel.pages)
.sort($scope.panel.sort[0],$scope.panel.sort[1]);
$scope.populate_modal(request);
var results = request.doSearch();
// Populate scope when we have results
results.then(function (results) {
$scope.panel.loading = false;
if(_segment === 0) {
$scope.hits = 0;
$scope.data = [];
query_id = $scope.query_id = new Date().getTime()
} }
_.defaults($scope.panel, _d) // Check for error and abort if found
if(!(_.isUndefined(results.error))) {
$scope.panel.error = $scope.parse_error(results.error);
return;
}
$scope.init = function () { // Check that we're still on the same query, if not stop
if($scope.query_id === query_id) {
$scope.data= $scope.data.concat(_.map(results.hits.hits, function(hit) {
return flatten_json(hit['_source']);
}));
$scope.set_listeners($scope.panel.group); $scope.hits += results.hits.total;
// Now that we're all setup, request the time from our group
eventBus.broadcast($scope.$id,$scope.panel.group,"get_time")
//and get the currently selected fields // Sort the data
eventBus.broadcast($scope.$id,$scope.panel.group,"get_fields") $scope.data = _.sortBy($scope.data, function(v){
}; return v[$scope.panel.sort[0]]
});
$scope.set_listeners = function(group) { // Reverse if needed
eventBus.register($scope,'time',function(event,time) { if($scope.panel.sort[1] == 'desc')
$scope.panel.offset = 0; $scope.data.reverse();
set_time(time)
});
eventBus.register($scope,'query',function(event,query) {
$scope.panel.offset = 0;
$scope.panel.query = _.isArray(query) ? query[0] : query;
$scope.get_data();
});
eventBus.register($scope,'sort', function(event,sort){
$scope.panel.sort = _.clone(sort);
$scope.get_data();
});
eventBus.register($scope,'selected_fields', function(event, fields) {
$scope.panel.fields = _.clone(fields)
$scope.$emit('render');
});
};
// Keep only what we need for the set
$scope.data = $scope.data.slice(0,$scope.panel.size * $scope.panel.pages)
$scope.get_data = function (segment,query_id) { } else {
return;
}
$scope.$emit('render')
});
// Make sure we have everything for the request to complete
if (_.isUndefined($scope.panel.index) || _.isUndefined($scope.time))
return;
var _segment = _.isUndefined(segment) ? 0 : segment
$scope.segment = _segment;
$scope.panel.loading = true; };
var request = $scope.ejs.Request().indices($scope.panel.index[_segment])
.query(ejs.FilteredQuery(
ejs.QueryStringQuery($scope.panel.query || '*'),
ejs.RangeFilter($scope.time.field)
.from($scope.time.from)
.to($scope.time.to)
)
)
.size($scope.panel.size*$scope.panel.pages)
.sort($scope.panel.sort[0],$scope.panel.sort[1]);
$scope.populate_modal(request); // I really don't like this function, too much dom manip. Break out into directive?
$scope.populate_modal = function (request) {
$scope.modal = {
title: "Inspector",
body: "<h5>Last Elasticsearch Query</h5><pre>" + 'curl -XGET ' + config.elasticsearch + '/' + $scope.panel.index + "/_search?pretty -d'\n" + angular.toJson(JSON.parse(request.toString()), true) + "'</pre>"
}
};
var results = request.doSearch(); function set_time(time) {
$scope.time = time;
$scope.panel.index = _.isUndefined(time.index) ? $scope.panel.index : time.index
$scope.get_data();
}
// Populate scope when we have results $scope.$watch('activeDocs', function(v) {
results.then(function (results) { eventBus.broadcast($scope.$id,$scope.panel.group,"table_documents",
$scope.panel.loading = false; {query:$scope.panel.query,docs:$scope.activeDocs});
if(_segment === 0) { });
$scope.hits = 0;
$scope.data = [];
query_id = $scope.query_id = new Date().getTime()
}
// Check for error and abort if found })
if(!(_.isUndefined(results.error))) { .directive('parallelcoordinates', function () {
$scope.panel.error = $scope.parse_error(results.error); return {
return; restrict: 'A',
} link: function (scope, elem, attrs) {
// Check that we're still on the same query, if not stop //used to store a variety of directive-level variables
if($scope.query_id === query_id) { var directive = {};
$scope.data= $scope.data.concat(_.map(results.hits.hits, function(hit) {
return flatten_json(hit['_source']);
}));
$scope.hits += results.hits.total; scope.initializing = false;
// Sort the data
$scope.data = _.sortBy($scope.data, function(v){
return v[$scope.panel.sort[0]]
});
// Reverse if needed /**
if($scope.panel.sort[1] == 'desc') * Initialize the panels if new, or render existing panels
$scope.data.reverse(); */
scope.init_or_render = function() {
if (typeof directive.svg === 'undefined') {
// Keep only what we need for the set //prevent duplicate initialization steps, if render is called again
$scope.data = $scope.data.slice(0,$scope.panel.size * $scope.panel.pages) //before the svg is setup
if (!scope.initializing) {
init_panel();
}
} else {
render_panel();
}
};
} else {
return;
}
$scope.$emit('render')
});
/**
* Receive render events
*/
scope.$on('render', function () {
scope.init_or_render();
});
/**
* On window resize, re-render the panel
*/
angular.element(window).bind('resize', function () {
scope.init_or_render();
});
};
// I really don't like this function, too much dom manip. Break out into directive? /**
$scope.populate_modal = function (request) { * Load the various panel-specific scripts then initialize
$scope.modal = { * the svg and set appropriate D3 settings
title: "Inspector", */
body: "<h5>Last Elasticsearch Query</h5><pre>" + 'curl -XGET ' + config.elasticsearch + '/' + $scope.panel.index + "/_search?pretty -d'\n" + angular.toJson(JSON.parse(request.toString()), true) + "'</pre>" function init_panel() {
}
};
function set_time(time) { directive.m = [80, 100, 80, 100];
$scope.time = time; directive.w = $(elem[0]).width() - directive.m[1] - directive.m[3];
$scope.panel.index = _.isUndefined(time.index) ? $scope.panel.index : time.index directive.h = $(elem[0]).height() - directive.m[0] - directive.m[2];
$scope.get_data();
}
$scope.$watch('activeDocs', function(v) { scope.initializing = true;
eventBus.broadcast($scope.$id,$scope.panel.group,"table_documents", // Using LABjs, wait until all scripts are loaded before rendering panel
{query:$scope.panel.query,docs:$scope.activeDocs}); var scripts = $LAB.script("common/lib/d3.v3.min.js?rand="+Math.floor(Math.random()*10000));
});
}) scripts.wait(function () {
.directive('parallelcoordinates', function () {
return {
restrict: 'A',
link: function (scope, elem, attrs) {
scope.initializing = false; directive.x = d3.scale.ordinal().domain(scope.panel.fields).rangePoints([0, directive.w]);
directive.y = {};
/**
* Initialize the panels if new, or render existing panels
*/
scope.init_or_render = function() {
if (typeof scope.svg === 'undefined') {
//prevent duplicate initialization steps, if render is called again
//before the svg is setup
if (!scope.initializing) {
init_panel();
}
} else {
render_panel();
}
};
/**
* Receive render events
*/
scope.$on('render', function () {
scope.init_or_render();
});
/**
* On window resize, re-render the panel
*/
angular.element(window).bind('resize', function () {
scope.init_or_render();
});
/**
* Load the various panel-specific scripts then initialize
* the svg and set appropriate D3 settings
*/
function init_panel() {
scope.m = [80, 100, 80, 100];
scope.w = $(elem[0]).width() - scope.m[1] - scope.m[3];
scope.h = $(elem[0]).height() - scope.m[0] - scope.m[2];
scope.initializing = true;
// Using LABjs, wait until all scripts are loaded before rendering panel
var scripts = $LAB.script("common/lib/d3.v3.min.js?rand="+Math.floor(Math.random()*10000));
scripts.wait(function () { directive.line = d3.svg.line().interpolate('cardinal');
directive.axis = d3.svg.axis().orient("left");
var viewbox = "0 0 " + (directive.w + directive.m[1] + directive.m[3]) + " " + (directive.h + directive.m[0] + directive.m[2]);
directive.svg = d3.select(elem[0]).append("svg")
.attr("width", "100%")
.attr("height", "100%")
.attr("viewbox", viewbox)
.append("svg:g")
.attr("transform", "translate(" + directive.m[3] + "," + directive.m[0] + ")");
scope.x = d3.scale.ordinal().domain(scope.panel.fields).rangePoints([0, scope.w]); // Add foreground lines.
scope.y = {}; directive.foreground = directive.svg.append("svg:g")
.attr("class", "foreground");
scope.line = d3.svg.line().interpolate('cardinal'); scope.initializing = false;
scope.axis = d3.svg.axis().orient("left"); render_panel();
});
scope.svg = d3.select(elem[0]).append("svg")
.attr("width", "100%")
.attr("height", "100%")
.attr("viewbox", "0 0 " + (scope.w + scope.m[1] + scope.m[3]) + " " + (scope.h + scope.m[0] + scope.m[2]))
.append("svg:g")
.attr("transform", "translate(" + scope.m[3] + "," + scope.m[0] + ")");
// Add foreground lines. }
scope.foreground = scope.svg.append("svg:g")
.attr("class", "foreground");
scope.initializing = false; // Returns the path for a given data point.
render_panel(); function path(d) {
}); return directive.line(scope.panel.fields.map(function(p) { return [directive.x(p), directive.y[p](d[p])]; }));
}
// Handles a brush event, toggling the display of foreground lines.
function brush() {
var actives = scope.panel.fields.filter(function(p) { return !directive.y[p].brush.empty(); }),
extents = actives.map(function(p) { return directive.y[p].brush.extent(); });
} //.fade class hides the "inactive" lines, helps speed up rendering significantly
directive.foregroundLines.classed("fade", function(d) {
return !actives.every(function(p, i) {
var inside = extents[i][0] <= d[p] && d[p] <= extents[i][1];
return inside;
});
});
//activeDocs contains the actual doc records for selected lines.
//will be broadcast out to the table
var activeDocs = _.filter(scope.data, function(v) {
return actives.every(function(p,i) {
var inside = extents[i][0] <= v[p] && v[p] <= extents[i][1];
return inside;
});
})
// Returns the path for a given data point. scope.$apply(function() {
function path(d) { scope.activeDocs = activeDocs;
return scope.line(scope.panel.fields.map(function(p) { return [scope.x(p), scope.y[p](d[p])]; })); });
} }
// Handles a brush event, toggling the display of foreground lines.
function brush() {
var actives = scope.panel.fields.filter(function(p) { return !scope.y[p].brush.empty(); }),
extents = actives.map(function(p) { return scope.y[p].brush.extent(); });
//.fade class hides the "inactive" lines, helps speed up rendering significantly //Drag functions are used for dragging the axis aroud
scope.foregroundLines.classed("fade", function(d) { function dragstart(d) {
return !actives.every(function(p, i) { directive.i = scope.panel.fields.indexOf(d);
var inside = extents[i][0] <= d[p] && d[p] <= extents[i][1]; }
return inside;
}); function drag(d) {
}); directive.x.range()[directive.i] = d3.event.x;
scope.panel.fields.sort(function(a, b) { return directive.x(a) - directive.x(b); });
directive.foregroundLines.attr("transform", function(d) { return "translate(" + directive.x(d) + ")"; });
directive.traits.attr("transform", function(d) { return "translate(" + directive.x(d) + ")"; });
directive.brushes.attr("transform", function(d) { return "translate(" + directive.x(d) + ")"; });
directive.axisLines.attr("transform", function(d) { return "translate(" + directive.x(d) + ")"; });
directive.foregroundLines.attr("d", path);
}
function dragend(d) {
directive.x.domain(scope.panel.fields).rangePoints([0, directive.w]);
var t = d3.transition().duration(500);
t.selectAll(".trait").attr("transform", function(d) { return "translate(" + directive.x(d) + ")"; });
t.selectAll(".axis").attr("transform", function(d) { return "translate(" + directive.x(d) + ")"; });
t.selectAll(".brush").attr("transform", function(d) { return "translate(" + directive.x(d) + ")"; });
t.selectAll(".foregroundlines").attr("d", path);
}
//activeDocs contains the actual doc records for selected lines.
//will be broadcast out to the table
var activeDocs = _.filter(scope.data, function(v) {
return actives.every(function(p,i) {
var inside = extents[i][0] <= v[p] && v[p] <= extents[i][1];
return inside;
});
})
scope.$apply(function() {
scope.activeDocs = activeDocs;
});
}
/**
* Render updates to the SVG. Typically happens when the data changes (time, query)
* or when new options are selected
*/
function render_panel() {
//Drag functions are used for dragging the axis aroud
function dragstart(d) {
scope.i = scope.panel.fields.indexOf(d);
}
function drag(d) { //update the svg if the size has changed
scope.x.range()[scope.i] = d3.event.x; directive.w = $(elem[0]).width() - directive.m[1] - directive.m[3];
scope.panel.fields.sort(function(a, b) { return scope.x(a) - scope.x(b); }); directive.h = $(elem[0]).height() - directive.m[0] - directive.m[2];
scope.foregroundLines.attr("transform", function(d) { return "translate(" + scope.x(d) + ")"; }); directive.svg.attr("viewbox", "0 0 " + (directive.w + directive.m[1] + directive.m[3]) + " " + (directive.h + directive.m[0] + directive.m[2]));
scope.traits.attr("transform", function(d) { return "translate(" + scope.x(d) + ")"; });
scope.brushes.attr("transform", function(d) { return "translate(" + scope.x(d) + ")"; });
scope.axisLines.attr("transform", function(d) { return "translate(" + scope.x(d) + ")"; });
scope.foregroundLines.attr("d", path);
}
function dragend(d) {
scope.x.domain(scope.panel.fields).rangePoints([0, scope.w]);
var t = d3.transition().duration(500);
t.selectAll(".trait").attr("transform", function(d) { return "translate(" + scope.x(d) + ")"; });
t.selectAll(".axis").attr("transform", function(d) { return "translate(" + scope.x(d) + ")"; });
t.selectAll(".brush").attr("transform", function(d) { return "translate(" + scope.x(d) + ")"; });
t.selectAll(".foregroundlines").attr("d", path);
}
directive.x = d3.scale.ordinal().domain(scope.panel.fields).rangePoints([0, directive.w]);
directive.y = {};
directive.line = d3.svg.line().interpolate('cardinal');
directive.axis = d3.svg.axis().orient("left");
/** var colorExtent = d3.extent(scope.data, function(p) { return +p[scope.panel.fields[0]]; });
* Render updates to the SVG. Typically happens when the data changes (time, query)
* or when new options are selected
*/
function render_panel() {
//update the svg if the size has changed
scope.w = $(elem[0]).width() - scope.m[1] - scope.m[3];
scope.h = $(elem[0]).height() - scope.m[0] - scope.m[2];
scope.svg.attr("viewbox", "0 0 " + (scope.w + scope.m[1] + scope.m[3]) + " " + (scope.h + scope.m[0] + scope.m[2]));
scope.x = d3.scale.ordinal().domain(scope.panel.fields).rangePoints([0, scope.w]);
scope.y = {};
scope.line = d3.svg.line().interpolate('cardinal');
scope.axis = d3.svg.axis().orient("left");
var colorExtent = d3.extent(scope.data, function(p) { return +p[scope.panel.fields[0]]; });
scope.colors = d3.scale.linear()
.domain([colorExtent[0],colorExtent[1]])
.range(["#4580FF", "#FF9245"]);
scope.panel.fields.forEach(function(d) {
//If it is a string, setup an ordinal scale.
//Otherwise, use a linear scale for numbers
if (_.isString(scope.data[0][d])) {
var value = function(v) { return v[d]; };
var values = _.map(_.uniq(scope.data, value),value);
scope.y[d] = d3.scale.ordinal()
.domain(values)
.rangeBands([scope.h, 0]);
} else if (_.isNumber(scope.data[0][d])) {
scope.y[d] = d3.scale.linear()
.domain(d3.extent(scope.data, function(p) { return +p[d]; }))
.range([scope.h, 0]);
}
scope.y[d].brush = d3.svg.brush()
.y(scope.y[d])
.on("brush", brush);
});
//pull out the actively selected columns for rendering the axis/lines
var activeData = _.map(scope.data, function(d) {
var t = {};
_.each(scope.panel.fields, function(f) {
t[f] = d[f];
});
return t;
});
//Lines
scope.foregroundLines = scope.foreground
.selectAll(".foregroundlines")
.data(activeData, function(d, i){
var id = "";
_.each(d, function(v) {
id += i + "_" + v;
});
return id;
});
scope.foregroundLines
.enter().append("svg:path")
.attr("d", path)
.attr("class", "foregroundlines")
.attr("style", function(d) {
return "stroke:" + scope.colors(d[scope.panel.fields[0]]) + ";";
});
scope.foregroundLines.exit().remove();
//Axis group
scope.traits = scope.svg.selectAll(".trait")
.data(scope.panel.fields, String);
scope.traits
.enter().append("svg:g")
.attr("class", "trait")
.attr("transform", function(d) { return "translate(" + scope.x(d) + ")"; });
scope.traits
.exit().remove();
//brushes used to select lines
scope.brushes = scope.svg.selectAll(".brush")
.data(scope.panel.fields, String);
scope.brushes
.enter()
.append("svg:g")
.attr("class", "brush")
.each(function(d) {
d3.select(this)
.call(scope.y[d].brush)
.attr("transform", function(d) { return "translate(" + scope.x(d) + ")"; });
})
.selectAll("rect")
.attr("x", -8)
.attr("width", 16);
//this section is repeated because enter() only works on "new" data, but we always need to
//update the brushes if things change. This just calls the brushing function, so it doesn't
//affect currently active rects
scope.brushes
.each(function(d) {
d3.select(this)
.call(scope.y[d].brush)
.attr("transform", function(d) { return "translate(" + scope.x(d) + ")"; });
});
scope.brushes
.exit().remove();
//vertical axis and labels
scope.axisLines = scope.svg.selectAll(".axis")
.data(scope.panel.fields, String);
scope.axisLines
.enter()
.append("svg:g")
.attr("class", "axis")
.each(function(d) {
d3.select(this)
.call(scope.axis.scale(scope.y[d]))
.attr("transform", function(d) { return "translate(" + scope.x(d) + ")"; });
}).call(d3.behavior.drag()
.origin(function(d) { return {x: scope.x(d)}; })
.on("dragstart", dragstart)
.on("drag", drag)
.on("dragend", dragend))
.append("svg:text")
.attr("text-anchor", "middle")
.attr("y", -9)
.text(String);
scope.axisLines
.exit().remove();
//Simulate a dragend in case there is new data and we need to rearrange
dragend();
}
directive.colors = d3.scale.linear()
.domain([colorExtent[0],colorExtent[1]])
.range(["#4580FF", "#FF9245"]);
scope.panel.fields.forEach(function(d) {
//If it is a string, setup an ordinal scale.
//Otherwise, use a linear scale for numbers
if (_.isString(scope.data[0][d])) {
var value = function(v) { return v[d]; };
var values = _.map(_.uniq(scope.data, value),value);
directive.y[d] = d3.scale.ordinal()
.domain(values)
.rangeBands([directive.h, 0]);
} else if (_.isNumber(scope.data[0][d])) {
directive.y[d] = d3.scale.linear()
.domain(d3.extent(scope.data, function(p) { return +p[d]; }))
.range([directive.h, 0]);
} }
};
}); directive.y[d].brush = d3.svg.brush()
.y(directive.y[d])
.on("brush", brush);
});
//pull out the actively selected columns for rendering the axis/lines
var activeData = _.map(scope.data, function(d) {
var t = {};
_.each(scope.panel.fields, function(f) {
t[f] = d[f];
});
return t;
});
//Lines
directive.foregroundLines = directive.foreground
.selectAll(".foregroundlines")
.data(activeData, function(d, i){
var id = "";
_.each(d, function(v) {
id += i + "_" + v;
});
return id;
});
directive.foregroundLines
.enter().append("svg:path")
.attr("d", path)
.attr("class", "foregroundlines")
.attr("style", function(d) {
return "stroke:" + directive.colors(d[scope.panel.fields[0]]) + ";";
});
directive.foregroundLines.exit().remove();
//Axis group
directive.traits = directive.svg.selectAll(".trait")
.data(scope.panel.fields, String);
directive.traits
.enter().append("svg:g")
.attr("class", "trait")
.attr("transform", function(d) { return "translate(" + directive.x(d) + ")"; });
directive.traits
.exit().remove();
//brushes used to select lines
directive.brushes = directive.svg.selectAll(".brush")
.data(scope.panel.fields, String);
directive.brushes
.enter()
.append("svg:g")
.attr("class", "brush")
.each(function(d) {
d3.select(this)
.call(directive.y[d].brush)
.attr("transform", function(d) { return "translate(" + directive.x(d) + ")"; });
})
.selectAll("rect")
.attr("x", -8)
.attr("width", 16);
//this section is repeated because enter() only works on "new" data, but we always need to
//update the brushes if things change. This just calls the brushing function, so it doesn't
//affect currently active rects
directive.brushes
.each(function(d) {
d3.select(this)
.call(directive.y[d].brush)
.attr("transform", function(d) { return "translate(" + directive.x(d) + ")"; });
});
directive.brushes
.exit().remove();
//vertical axis and labels
directive.axisLines = directive.svg.selectAll(".axis")
.data(scope.panel.fields, String);
directive.axisLines
.enter()
.append("svg:g")
.attr("class", "axis")
.each(function(d) {
d3.select(this)
.call(directive.axis.scale(directive.y[d]))
.attr("transform", function(d) { return "translate(" + directive.x(d) + ")"; });
}).call(d3.behavior.drag()
.origin(function(d) { return {x: directive.x(d)}; })
.on("dragstart", dragstart)
.on("drag", drag)
.on("dragend", dragend))
.append("svg:text")
.attr("text-anchor", "middle")
.attr("y", -9)
.text(String);
directive.axisLines
.exit().remove();
//Simulate a dragend in case there is new data and we need to rearrange
dragend();
}
}
};
});
Write Preview
Loading…
Cancel
Save