Commit 81187c1e authored by M Parker's avatar M Parker

Add basic support for node, link colors.

parent 33a770db
......@@ -10,6 +10,8 @@
Drupal.d3.sankey = function (select, settings) {
var chartCanvas;
var chart;
var colorNodes;
var colorLinks;
// Grab settings from the settings object passed to us by the D3 module. Use
// defaults if the settings we want do not exist in the settings object.
......@@ -27,6 +29,34 @@
var nodes = (settings.nodes || []);
var links = (settings.links || []);
// If we were passed an array of node colors, create an ordinal scale and
// use that.
if (Array.isArray(settings.node_colors)) {
colorNodes = d3.scale.ordinal().range(settings.node_colors);
}
// If we were passed a single node color, use that.
else if (typeof settings.node_colors === 'string') {
colorNodes = settings.node_colors;
}
// If we were passed a function, use that.
else if (typeof settings.node_colors === 'function') {
colorNodes = settings.node_colors;
}
// If we were passed an array of link colors, create an ordinal scale and
// use that.
if (Array.isArray(settings.link_colors)) {
colorLinks = d3.scale.ordinal().range(settings.link_colors);
}
// If we were passed a single link color, use that.
else if (typeof settings.link_colors === 'string') {
colorLinks = settings.link_colors;
}
// If we were passed a function, use that.
else if (typeof settings.link_colors === 'function') {
colorLinks = settings.link_colors;
}
// In the chart element, add an SVG tag with the correct classes, width, and
// height; and inside that, a group for the chart itself.
chartCanvas = d3.select('#' + settings.id)
......@@ -40,6 +70,16 @@
.spread(spread)
.alignLabel(alignLabel);
// If we were given node colors, use them.
if (typeof colorNodes !== 'undefined') {
chart.colorNodes(colorNodes);
}
// If we were given link colors, use them.
if (typeof colorLinks !== 'undefined') {
chart.colorLinks(colorLinks);
}
// Draw a sankey chart with the data.
chart.draw({nodes: nodes, links: links});
};
......
......@@ -155,6 +155,17 @@ function _d3_sankey_examples_sankey() {
5 => array('name' => 'Client 2', 'id' => 'client_2'),
),
// You can define the colors of nodes as either a single string containing
// a valid SVG color string, or as an array of strings containing valid SVG
// color strings.
//
// See https://www.w3.org/TR/SVGColor12/#color for the SVG color string
// syntax.
//
// This is an example of a single SVG color string; see 'link_colors' below
// for an example of an array of SVG color strings.
'node_colors' => '#ff0000',
// The links are the paths between the nodes. You can define each link as an
// associative PHP array (which will get turned into a JS object). The D3,
// d3-plugins-sankey, d3.chart, and d3.chart.sankey source code does not
......@@ -185,6 +196,17 @@ function _d3_sankey_examples_sankey() {
array('value' => 4000, 'source' => 3, 'target' => 4),
array('value' => 4000, 'source' => 3, 'target' => 5),
),
// You can define the colors of links as either a single string containing
// a valid SVG color string, or as an array of strings containing valid SVG
// color strings.
//
// See https://www.w3.org/TR/SVGColor12/#color for the SVG color string
// syntax.
//
// This is an example of an array of SVG color strings; see 'node_colors'
// above for an example of a single SVG color string.
'link_colors' => array('red', '#7F7F26'),
);
return d3_draw($chart);
......@@ -207,6 +229,8 @@ function _d3_sankey_examples_table_group_pp() {
'spread' => TRUE,
'iterations' => 1,
'alignLabel' => D3_SANKEY_ALIGNLABEL_AUTO,
'node_colors' => '#ff0000',
'link_colors' => array('red', '#7F7F26'),
);
// Create some sample data.
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment