diff --git a/src/components/graph/graph.builder.js b/src/components/graph/graph.builder.js
index e66a7228e..3d3ddd353 100644
--- a/src/components/graph/graph.builder.js
+++ b/src/components/graph/graph.builder.js
@@ -33,7 +33,7 @@ function _getNodeOpacity(node, highlightedNode, highlightedLink, config) {
} else if (someNodeHighlighted) {
opacity = highlight ? config.node.opacity : config.highlightOpacity;
} else {
- opacity = config.node.opacity;
+ opacity = node.opacity || config.node.opacity;
}
return opacity;
@@ -81,7 +81,7 @@ function buildLinkProps(link, nodes, links, config, linkCallbacks, highlightedNo
target === (highlightedLink && highlightedLink.target);
const highlight = reasonNode || reasonLink;
- let opacity = config.link.opacity;
+ let opacity = link.opacity || config.link.opacity;
if (highlightedNode || (highlightedLink && highlightedLink.source)) {
opacity = highlight ? config.link.opacity : config.highlightOpacity;
@@ -93,7 +93,7 @@ function buildLinkProps(link, nodes, links, config, linkCallbacks, highlightedNo
stroke = config.link.highlightColor === CONST.KEYWORDS.SAME ? config.link.color : config.link.highlightColor;
}
- let strokeWidth = config.link.strokeWidth * (1 / transform);
+ let strokeWidth = (link.strokeWidth || config.link.strokeWidth) * (1 / transform);
if (config.link.semanticStrokeWidth) {
const linkValue = links[source][target] || links[target][source] || 1;
@@ -137,6 +137,7 @@ function buildNodeProps(node, config, nodeCallbacks = {}, highlightedNode, highl
(node.id === (highlightedLink && highlightedLink.source) ||
node.id === (highlightedLink && highlightedLink.target));
const opacity = _getNodeOpacity(node, highlightedNode, highlightedLink, config);
+
let fill = node.color || config.node.color;
if (highlight && config.node.highlightColor !== CONST.KEYWORDS.SAME) {
@@ -155,11 +156,16 @@ function buildNodeProps(node, config, nodeCallbacks = {}, highlightedNode, highl
label = config.node.labelProperty(node);
}
+ let strokeWidth = node.strokeWidth || config.node.strokeWidth;
+
+ if (highlight && config.node.highlightStrokeWidth !== CONST.KEYWORDS.SAME) {
+ strokeWidth = config.node.highlightStrokeWidth;
+ }
+
const t = 1 / transform;
const nodeSize = node.size || config.node.size;
const fontSize = highlight ? config.node.highlightFontSize : config.node.fontSize;
const dx = fontSize * t + nodeSize / 100 + 1.5;
- const strokeWidth = highlight ? config.node.highlightStrokeWidth : config.node.strokeWidth;
const svg = node.svg || config.node.svg;
const fontColor = node.fontColor || config.node.fontColor;
diff --git a/src/components/graph/graph.config.js b/src/components/graph/graph.config.js
index dd354992c..dcc484796 100644
--- a/src/components/graph/graph.config.js
+++ b/src/components/graph/graph.config.js
@@ -107,7 +107,7 @@
* @param {number} [node.highlightFontSize=8] - fontSize in highlighted state.
* @param {string} [node.highlightFontWeight='normal'] - fontWeight in highlighted state.
* @param {string} [node.highlightStrokeColor='SAME'] - strokeColor in highlighted state.
- * @param {number} [node.highlightStrokeWidth=1.5] - strokeWidth in highlighted state.
+ * @param {number} [node.highlightStrokeWidth='SAME'] - strokeWidth in highlighted state.
* @param {string|Function} [node.labelProperty='id'] - this is the node property that will be used in runtime to
* fetch the label content. You just need to add some property (e.g. firstName) to the node payload and then set
* node.labelProperty to be **'firstName'**. **This can also be a function!**, if you pass a function here it will be called
@@ -123,12 +123,12 @@
*
* @param {string} [node.mouseCursor='pointer'] - {@link https://developer.mozilla.org/en/docs/Web/CSS/cursor?v=control|cursor}
* property for when some node is mouse hovered.
- * @param {number} [node.opacity=1] - by default all nodes will have this opacity value.
+ * @param {number} [node.opacity=1] 🔍🔍🔍 - by default all nodes will have this opacity value.
* @param {boolean} [node.renderLabel=true] - when set to false no labels will appear along side nodes in the
* graph.
* @param {number} [node.size=200] - 🔍🔍🔍 defines the size of all nodes.
* @param {string} [node.strokeColor='none'] - 🔍🔍🔍 this is the stroke color that will be applied to the node if no **strokeColor property** is found inside the node itself (yes **you can pass a property 'strokeColor' inside the node and that stroke color will override this default one** ).
- * @param {number} [node.strokeWidth=1.5] - the width of the all node strokes.
+ * @param {number} [node.strokeWidth=1.5] 🔍🔍🔍 - the width of the all node strokes.
* @param {string} [node.svg=''] - 🔍🔍🔍 render custom svg for nodes in alternative to **node.symbolType**. This svg can
* be provided as a string to either a remote svg resource or for a local one.
*
@@ -154,14 +154,14 @@
*
* @param {string} [link.mouseCursor='pointer'] - {@link https://developer.mozilla.org/en/docs/Web/CSS/cursor?v=control|cursor}
* property for when link is mouse hovered.
- * @param {number} [link.opacity=1] - the default opacity value for links.
+ * @param {number} [link.opacity=1] 🔍🔍🔍 - the default opacity value for links.
* @param {boolean} [link.semanticStrokeWidth=false] - when set to true all links will have
* *"semantic width"*, this means that the width of the connections will be proportional to the value of each link.
* This is how link strokeWidth will be calculated:
* ```javascript
* strokeWidth += (linkValue * strokeWidth) / 10;
* ```
- * @param {number} [link.strokeWidth=1.5] - strokeWidth for all links. By default the actual value is obtain by the
+ * @param {number} [link.strokeWidth=1.5] 🔍🔍🔍 - strokeWidth for all links. By default the actual value is obtain by the
* following expression:
* ```javascript
* link.strokeWidth * (1 / transform); // transform is a zoom delta Δ value
@@ -219,7 +219,7 @@ export default {
highlightFontSize: 8,
highlightFontWeight: "normal",
highlightStrokeColor: "SAME",
- highlightStrokeWidth: 1.5,
+ highlightStrokeWidth: "SAME",
labelProperty: "id",
mouseCursor: "pointer",
opacity: 1,