Skip to content

Commit

Permalink
Merge pull request #68 from hkelly93/enhancement/67/Add-the-ability-t…
Browse files Browse the repository at this point in the history 
…o-interact-with-a-child-when-it-has-been-clicked-on

Enhancement/67/add the ability to interact with a child when it has been clicked on
  • Loading branch information
@hkelly93
hkelly93 committed Jul 13, 2016
2 parents ef99943 + 13611cb commit c8194ce
Show file tree
Hide file tree
Showing 5 changed files with 138 additions and 24 deletions.
2 changes: 1 addition & 1 deletion .jscsrc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@
"catch",
"typeof"
],
"safeContextKeyword": "_this",
/*"safeContextKeyword": "_this",*/
"requireSemicolons": true,
"validateLineBreaks": "LF",
"validateQuoteMarks": "'",
Expand Down
86 changes: 71 additions & 15 deletions dest/d3.relationshipgraph.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -564,7 +564,7 @@ var RelationshipGraph = function () {
* @returns {d3.tooltip} the tip object.
*/
var createTooltip = function createTooltip(self) {
var hiddenKeys = ['ROW', 'INDEX', 'COLOR', 'PARENTCOLOR', 'PARENT', '_PRIVATE_'],
var hiddenKeys = ['ROW', 'INDEX', 'COLOR', 'PARENTCOLOR', 'PARENT', '_PRIVATE_', 'COLORVALUE', 'SETNODECOLOR', 'SETNODESTROKECOLOR'],
showKeys = self.configuration.showKeys;

return d3.tip().attr('class', 'relationshipGraph-tip').offset([-8, -10]).html(function (obj) {
Expand Down Expand Up @@ -632,20 +632,34 @@ var RelationshipGraph = function () {
* Generate the basic set of colors.
*
* @returns {string[]} List of HEX colors.
* @private
*/


_createClass(RelationshipGraph, [{
key: 'getPixelLength',
key: 'getId',


/**
* Return the ID of the selection.
*
* @returns {string} The ID of the selection.
* @private
*/
value: function getId() {
return this.configuration.selection._groups[0][0].id;
}

/**
* Returns the pixel length of the string based on the font size.
*
* @param {string} str The string to get the length of.
* @returns {Number} The pixel length of the string.
* @public
*/

}, {
key: 'getPixelLength',
value: function getPixelLength(str) {
if (RelationshipGraph.containsKey(this.measuredCache, str)) {
return this.measuredCache[str];
Expand Down Expand Up @@ -675,6 +689,8 @@ var RelationshipGraph = function () {
}, {
key: 'assignIndexAndRow',
value: function assignIndexAndRow(json, parentSizes, parents) {
var _this2 = this;

// Determine the longest parent name to calculate how far from the left the child blocks should start.
var longest = '';
var parentNames = Object.keys(parentSizes);
Expand Down Expand Up @@ -702,8 +718,7 @@ var RelationshipGraph = function () {
var jsonLength = json.length;
var thresholds = configuration.thresholds;


for (i = 0; i < jsonLength; i++) {
var _loop = function _loop() {
var element = json[i];
var parent = element.parent;

Expand Down Expand Up @@ -749,7 +764,40 @@ var RelationshipGraph = function () {
var thresholdIndex = compare(value, thresholds);

element.color = thresholdIndex === -1 ? 0 : thresholdIndex;
element.colorValue = _this2.configuration.colors[element.color % _this2.configuration.colors.length];
}

// Add the interaction methods
/**
* Set the color of the node.
*
* @param {String} color The new color of the node to set.
*/
element.setNodeColor = function (color) {
var node = document.getElementById(this.getId() + '-child-node' + element.row + element.index);

if (node) {
node.style.fill = color;
}
};

/**
* Set the color of the node's stroke.
*
* @param {String} color The color to set the stroke to. Set this to a falsy value to remove the stroke.
*/
element.setNodeStrokeColor = function (color) {
var node = document.getElementById(this.getId() + '-child-node' + element.row + element.index);

if (node) {
node.style.strokeWidth = color ? '1px' : 0;
node.style.stroke = color ? color : '';
}
};
};

for (i = 0; i < jsonLength; i++) {
_loop();
}

return [longestWidth, calculatedMaxChildren, row];
Expand All @@ -771,7 +819,7 @@ var RelationshipGraph = function () {
* @param {d3.selection} parentNodes The parentNodes.
* @param {Object} parentSizes The child count for each parent.
* @param {number} longestWidth The longest width of a parent node.
* @param {number} calculatedMaxChildren The maxiumum amount of children nodes per row.
* @param {number} calculatedMaxChildren The maximum amount of children nodes per row.
* @private
*/
value: function createParents(parentNodes, parentSizes, longestWidth, calculatedMaxChildren) {
Expand Down Expand Up @@ -866,12 +914,14 @@ var RelationshipGraph = function () {
value: function createChildren(childrenNodes, longestWidth) {
var _this = this;

childrenNodes.enter().append('rect').attr('x', function (obj) {
childrenNodes.enter().append('rect').attr('id', function (obj) {
return _this.getId() + '-child-node' + obj.row + obj.index;
}).attr('x', function (obj) {
return longestWidth + (obj.index - 1) * _this.configuration.blockSize + 5;
}).attr('y', function (obj) {
return (obj.row - 1) * _this.configuration.blockSize;
}).attr('rx', 4).attr('ry', 4).attr('class', 'relationshipGraph-block').attr('width', _this.configuration.blockSize).attr('height', _this.configuration.blockSize).style('fill', function (obj) {
return _this.configuration.colors[obj.color % _this.configuration.colors.length] || _this.configuration.colors[0];
return obj.colorValue;
}).style('cursor', _this.childPointer ? 'pointer' : 'default').on('mouseover', _this.tooltip ? _this.tooltip.show : RelationshipGraph.noop).on('mouseout', _this.tooltip ? _this.tooltip.hide : RelationshipGraph.noop).on('click', function (obj) {
_this.tooltip.hide();
_this.configuration.onClick.child(obj);
Expand All @@ -890,16 +940,17 @@ var RelationshipGraph = function () {
key: 'updateChildren',
value: function updateChildren(childrenNodes, longestWidth) {
var blockSize = this.configuration.blockSize;
var colors = this.configuration.colors;
var colorsLength = colors.length;
var _this = this;

// noinspection JSUnresolvedFunction
childrenNodes.transition(this.configuration.transitionTime).attr('x', function (obj) {
childrenNodes.transition(this.configuration.transitionTime).attr('id', function (obj) {
return _this.getId() + '-child-node' + obj.row + obj.index;
}).attr('x', function (obj) {
return longestWidth + (obj.index - 1) * blockSize + 5;
}).attr('y', function (obj) {
return (obj.row - 1) * blockSize;
}).style('fill', function (obj) {
return colors[obj.color % colorsLength] || colors[0];
return obj.colorValue;
});
}

Expand Down Expand Up @@ -1027,6 +1078,7 @@ var RelationshipGraph = function () {
* @param {object} obj The object to check in.
* @param {string} key They key to check for.
* @returns {boolean} Whether or not the object contains the key.
* @private
*/

}, {
Expand All @@ -1041,6 +1093,7 @@ var RelationshipGraph = function () {
* @param {*[]} arr The array to check in.
* @param {string} key The key to check for.
* @returns {boolean} Whether or not the key exists in the array.
* @private
*/

}, {
Expand All @@ -1055,6 +1108,7 @@ var RelationshipGraph = function () {
* @param {string} str The string to truncate.
* @param {number} cap The number to cap the string at before it gets truncated.
* @returns {string} The string truncated (if necessary).
* @private
*/

}, {
Expand Down Expand Up @@ -1082,6 +1136,8 @@ var RelationshipGraph = function () {

/**
* Noop function.
*
* @private
*/

}, {
Expand Down Expand Up @@ -1170,13 +1226,13 @@ var RelationshipGraph = function () {
var length = json.length;

while (length--) {
var element = json[length];
var keys = Object.keys(element);
var _element = json[length];
var keys = Object.keys(_element);
var keyLength = keys.length;
var parentColor = element.parentColor;
var parentColor = _element.parentColor;


if (element.parent === undefined) {
if (_element.parent === undefined) {
throw 'Child does not have a parent.';
} else if (parentColor !== undefined && (parentColor > 4 || parentColor < 0)) {
throw 'Parent color is unsupported.';
Expand Down
Loading

0 comments on commit c8194ce

Please sign in to comment.