Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
MUR Drupal
d3_sankey
Commits
81187c1e
Commit
81187c1e
authored
Sep 23, 2016
by
M Parker
Browse files
Add basic support for node, link colors.
parent
33a770db
Changes
2
Hide whitespace changes
Inline
Side-by-side
libraries/d3.sankey/sankey.js
View file @
81187c1e
...
...
@@ -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
});
};
...
...
modules/d3_sankey_examples/d3_sankey_examples.module
View file @
81187c1e
...
...
@@ -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.
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment