1
0
Fork 0

GraphViewer: EdgeShaper now supports colouring by attribute value

This commit is contained in:
Michael Hackstein 2013-04-03 17:36:59 +02:00
parent f08392f592
commit c62230782a
3 changed files with 14 additions and 6 deletions

View File

@ -1,5 +1,6 @@
/*jslint indent: 2, nomen: true, maxlen: 100, white: true plusplus: true */ /*jslint indent: 2, nomen: true, maxlen: 100, white: true plusplus: true */
/*global _, $, d3*/ /*global _, $, d3*/
/*global ColourMapper*/
//////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////
/// @brief Graph functionality /// @brief Graph functionality
/// ///
@ -55,6 +56,7 @@ function EdgeShaper(parent, flags, idfunc) {
noop = function (line, g) { noop = function (line, g) {
}, },
colourMapper = new ColourMapper(),
events = { events = {
click: noop, click: noop,
dblclick: noop, dblclick: noop,
@ -261,6 +263,11 @@ function EdgeShaper(parent, flags, idfunc) {
}; };
break; break;
case "attribute": case "attribute":
addColor = function (line, g) {
g.attr("stroke", function(e) {
return colourMapper.getColour(e[color.key]);
});
};
break; break;
default: default:
throw "Sorry given colour-scheme not known"; throw "Sorry given colour-scheme not known";

View File

@ -20,6 +20,7 @@
<script type="text/javascript" src="helper/eventHelper.js"></script> <script type="text/javascript" src="helper/eventHelper.js"></script>
<script type="text/javascript" src="../graph/colourMapper.js"></script>
<script type="text/javascript" src="../graph/edgeShaper.js"></script> <script type="text/javascript" src="../graph/edgeShaper.js"></script>
<script type="text/javascript" src="../ui/modalDialogHelper.js"></script> <script type="text/javascript" src="../ui/modalDialogHelper.js"></script>
<script type="text/javascript" src="../ui/edgeShaperControls.js"></script> <script type="text/javascript" src="../ui/edgeShaperControls.js"></script>

View File

@ -301,17 +301,17 @@
{ {
color: { color: {
type: "attribute", type: "attribute",
value: "label" key: "label"
} }
} }
), ),
c1,c2,c3,c4; c1,c2,c3,c4;
shaper.drawEdges(edges); shaper.drawEdges(edges);
c1 = $("#1-2 line").attr("stroke"); c1 = $("#1-2").attr("stroke");
c2 = $("#2-3 line").attr("stroke"); c2 = $("#2-3").attr("stroke");
c3 = $("#3-4 line").attr("stroke"); c3 = $("#3-4").attr("stroke");
c4 = $("#4-1 line").attr("stroke"); c4 = $("#4-1").attr("stroke");
expect(c1).toBeDefined(); expect(c1).toBeDefined();
expect(c2).toBeDefined(); expect(c2).toBeDefined();
@ -735,7 +735,7 @@
expect($("svg #3-4")[0]).toBeUndefined(); expect($("svg #3-4")[0]).toBeUndefined();
}); });
it('should be able to add some edges and remove other egdes', function () { it('should be able to add some edges and remove other edges', function () {
edges.splice(2, 1); edges.splice(2, 1);
edges.splice(0, 1); edges.splice(0, 1);
edges.push( edges.push(