Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

moving svg to own page

  • Loading branch information...
commit d56cce2c39c077f25ff5d1ff70e368a57e7bb706 1 parent 065cb28
@peterneubauer peterneubauer authored
View
3  app.js
@@ -89,6 +89,8 @@ function forward(url) {
app.get('/', routes.index);
+app.get('/index', routes.index_graph);
+app.get('/index_graph_svg', routes.index_graph_svg);
app.get('/favicon.ico', forward('/assets/ico/favicon.ico'));
app.get('/learn', routes.learn); // path: concepts, best practices, operations
@@ -115,7 +117,6 @@ app.get('/participate/contributors', routes.contributors);
app.get('/learn/graphdatabase', routes.graphdb);
app.get('/learn/try', routes.try);
app.get('/test/d3', routes.d3);
-app.get('/index', routes.index_graph);
app.get('/learn/events', forward("http://www.google.com/calendar/embed?src=neopersistence.com_3p7hh97rfcu76paib7l2dp4llo%40group.calendar.google.com&ctz=America/Los_Angeles"));
View
78 public/assets/css/graph-diagram.css
@@ -0,0 +1,78 @@
+body, svg {
+ font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
+}
+
+circle.graph-diagram-node {
+ stroke: black;
+ stroke-width: 8px;
+ fill: white;
+}
+
+circle.graph-diagram-node.highlight {
+ stroke: blue;
+}
+
+circle.graph-diagram-node.lowlight {
+ stroke: #555;
+}
+
+path.graph-diagram-relationship, text.graph-diagram-bound-variable, text.graph-diagram-relationship-label, text.speech-bubble-content {
+ stroke: none;
+ fill: black;
+}
+
+path.graph-diagram-relationship.highlight, text.graph-diagram-bound-variable.highlight, text.graph-diagram-relationship-label.highlight {
+ fill: blue;
+}
+
+path.graph-diagram-relationship.lowlight, text.graph-diagram-bound-variable.lowlight, text.graph-diagram-relationship-label.lowlight {
+ fill: #555;
+}
+
+path.graph-diagram-property-outline, path.speech-bubble-outline {
+ stroke: black;
+ stroke-width: 3px;
+ fill: white;
+}
+
+text.speech-bubble-content {
+ user-select: none;
+ -webkit-user-select: none;
+ cursor: default;
+ alignment-baseline: central;
+ font-size: 50px
+}
+
+text.speech-bubble-content.property-key {
+ text-anchor: end;
+}
+
+text.graph-diagram-bound-variable, text.graph-diagram-bound-variable-shadow {
+ user-select: none;
+ -webkit-user-select: none;
+ cursor: default;
+ text-anchor: middle;
+ alignment-baseline: central;
+ font-size: 50px
+}
+
+text.graph-diagram-bound-variable-shadow {
+ fill: none;
+ stroke: white;
+ stroke-width: 20px;
+ stroke-linejoin: round;
+}
+
+text.graph-diagram-relationship-label {
+ user-select: none;
+ -webkit-user-select: none;
+ cursor: default;
+ text-anchor: middle;
+ alignment-baseline: bottom;
+ baseline-shift: 30%;
+ font-size: 50px
+}
+
+#textMeasuringCanvas {
+ display: none;
+}
View
748 public/assets/js/graph-diagram.js
@@ -0,0 +1,748 @@
+gd = {};
+
+(function() {
+
+ gd.parameters = {
+ radius: 50,
+ strokeWidth: 8,
+ nodeStartMargin: 15,
+ nodeEndMargin: 15,
+ speechBubbleMargin: 20,
+ speechBubblePadding: 10
+ };
+
+ gd.model = function() {
+
+ var nodes = {},
+ relationships = [],
+ highestId = 0,
+ internalScale = 1,
+ externalScale = 1;
+
+ var model = {};
+
+ var Node = function() {
+ var position = {};
+ var label;
+ var classes = [];
+ var properties = new Properties();
+
+ this.class = function(classesString) {
+ if (arguments.length == 1) {
+ classes = classesString.split(" ").filter(function(className) {
+ return className.length > 0 && className != "graph-diagram-node";
+ });
+ return this;
+ }
+ return ["graph-diagram-node"].concat(classes);
+ };
+
+ this.x = function(x) {
+ if (arguments.length == 1) {
+ position.x = Number(x);
+ return this;
+ }
+ return position.x;
+ };
+
+ this.y = function(y) {
+ if (arguments.length == 1) {
+ position.y = Number(y);
+ return this;
+ }
+ return position.y;
+ };
+
+ this.ex = function() {
+ return position.x * internalScale;
+ };
+
+ this.ey = function() {
+ return position.y * internalScale;
+ };
+
+ this.distanceTo = function(node) {
+ var dx = node.x() - this.x();
+ var dy = node.y() - this.y();
+ return Math.sqrt(dx * dx + dy * dy) * internalScale;
+ };
+
+ this.drag = function(dx, dy) {
+ position.x += dx / internalScale;
+ position.y += dy / internalScale;
+ };
+
+ this.midwayTo = function(node) {
+ var dx = node.x() - this.x();
+ var dy = node.y() - this.y();
+ return {
+ x: this.x() + dx / 2,
+ y: this.y() + dy / 2
+ };
+ };
+
+ this.angleTo = function(node) {
+ var dx = node.x() - this.x();
+ var dy = node.y() - this.y();
+ return Math.atan2(dy, dx) * 180 / Math.PI
+ };
+
+ this.isLeftOf = function(node) {
+ return this.x() < node.x();
+ };
+
+ this.label = function(labelText) {
+ if (arguments.length == 1) {
+ label = labelText;
+ return this;
+ }
+ return label;
+ };
+
+ this.properties = function() {
+ return properties;
+ };
+ };
+
+ var Properties = function() {
+ var keys = [];
+ var values = {};
+
+ this.list = function() {
+ return keys.map(function (key) {
+ return { key: key, value: values[key] };
+ });
+ };
+
+ this.set = function(key, value) {
+ if (!values[key]) {
+ keys.push(key);
+ }
+ values[key] = value;
+ return this;
+ };
+
+ this.clearAll = function() {
+ keys = [];
+ values = {};
+ }
+ };
+
+ var Relationship = function(start, end) {
+ var label;
+ var classes = [];
+
+ this.class = function(classesString) {
+ if (arguments.length == 1) {
+ classes = classesString.split(" ").filter(function(className) {
+ return className.length > 0 && className != "graph-diagram-relationship";
+ });
+ return this;
+ }
+ return ["graph-diagram-relationship"].concat(classes);
+ };
+
+ this.label = function(labelText) {
+ if (arguments.length == 1) {
+ label = labelText;
+ return this;
+ }
+ return label;
+ };
+
+ this.start = start;
+ this.end = end;
+ };
+
+ function generateNodeId() {
+ while (nodes[highestId]) {
+ highestId++;
+ }
+ return highestId;
+ }
+
+ model.createNode = function(optionalNodeId) {
+ var nodeId = optionalNodeId || generateNodeId();
+ var node = new Node();
+ node.id = nodeId;
+ nodes[nodeId] = node;
+ return node;
+ };
+
+ model.deleteNode = function(node) {
+ relationships = relationships.filter(function (relationship) {
+ return !(relationship.start === node || relationship.end == node);
+ });
+ delete nodes[node.id];
+ };
+
+ model.createRelationship = function(start, end) {
+ var relationship = new Relationship(start, end);
+ relationships.push(relationship);
+ return relationship;
+ };
+
+ model.nodeList = function() {
+ var list = [];
+ for (var nodeId in nodes) {
+ if (nodes.hasOwnProperty(nodeId)) {
+ list.push(nodes[nodeId]);
+ }
+ }
+ return list;
+ };
+
+ model.lookupNode = function(nodeId) {
+ return nodes[nodeId];
+ };
+
+ model.relationshipList = function() {
+ return relationships;
+ };
+
+ model.internalScale = function(newScale) {
+ if (arguments.length == 1) {
+ internalScale = parseFloat(newScale);
+ return this;
+ }
+ return internalScale;
+ };
+
+ model.externalScale = function(newScale) {
+ if (arguments.length == 1) {
+ externalScale = parseFloat(newScale);
+ return this;
+ }
+ return externalScale;
+ };
+
+ return model;
+ };
+
+ gd.scaling = function() {
+
+ var scaling = {};
+
+ function smallestContainingBox(graph) {
+ var cxList = graph.nodeList().map(function(d) { return d.ex(); });
+ var cyList = graph.nodeList().map(function(d) { return d.ey(); });
+
+ var bounds = {
+ xMin:Math.min.apply(Math, cxList) - gd.parameters.radius - gd.parameters.strokeWidth,
+ xMax:Math.max.apply(Math, cxList) + gd.parameters.radius + gd.parameters.strokeWidth,
+ yMin:Math.min.apply(Math, cyList) - gd.parameters.radius - gd.parameters.strokeWidth,
+ yMax:Math.max.apply(Math, cyList) + gd.parameters.radius + gd.parameters.strokeWidth
+ };
+ return { x: bounds.xMin, y: bounds.yMin,
+ width: (bounds.xMax - bounds.xMin), height: (bounds.yMax - bounds.yMin) }
+ }
+
+ scaling.centeredOrScaledViewBox = function(viewDimensions, diagramExtent) {
+ var xScale = diagramExtent.width / viewDimensions.width;
+ var yScale = diagramExtent.height / viewDimensions.height;
+ var scaleFactor = xScale < 1 && yScale < 1 ? 1 : (xScale > yScale ? xScale : yScale);
+
+ return {
+ x: ((diagramExtent.width - viewDimensions.width * scaleFactor) / 2) + diagramExtent.x,
+ y: ((diagramExtent.height - viewDimensions.height * scaleFactor) / 2) + diagramExtent.y,
+ width: viewDimensions.width * scaleFactor,
+ height: viewDimensions.height * scaleFactor
+ };
+ };
+
+ scaling.centerOrScaleDiagramToFitSvg = function(graph, view) {
+ var svgElement = view.node();
+ var viewDimensions = {
+ width: svgElement.clientWidth,
+ height: svgElement.clientHeight
+ };
+ var diagramExtent = smallestContainingBox( graph );
+ var box = scaling.centeredOrScaledViewBox( viewDimensions, diagramExtent );
+
+ view
+ .attr("viewBox", [box.x, box.y, box.width, box.height].join( " " ));
+ };
+
+ scaling.sizeSvgToFitDiagram = function(graph, view) {
+ var box = smallestContainingBox( graph );
+
+ view
+ .attr("viewBox", [box.x, box.y, box.width, box.height].join( " " ))
+ .attr("width", box.width * graph.externalScale())
+ .attr("height", box.height * graph.externalScale());
+ };
+
+ return scaling;
+ }();
+
+ gd.markup = function() {
+
+ var markup = {};
+
+ markup.parse = function(selection) {
+ var model = gd.model();
+
+ if (selection.attr("data-internal-scale")) {
+ model.internalScale(selection.attr("data-internal-scale"));
+ }
+ if (selection.attr("data-external-scale")) {
+ model.externalScale(selection.attr("data-external-scale"));
+ }
+
+ selection.selectAll(".graph-diagram-node").each(function () {
+ var nodeMarkup = d3.select(this);
+ var id = nodeMarkup.attr("data-node-id");
+ var node = model.createNode(id);
+ node.href = nodeMarkup.attr("href");
+ node.class(nodeMarkup.attr("class") || "");
+ node.x(nodeMarkup.attr("data-x"));
+ node.y(nodeMarkup.attr("data-y"));
+ nodeMarkup.select("span.graph-diagram-in-node-caption").each(function() {
+ node.label(d3.select(this).text());
+ });
+ //nodeMarkup.attr("onClick" ,function(){alert("hej")});
+ nodeMarkup.select("dl.graph-diagram-properties").each(function() {
+ var elements = d3.select(this).selectAll("dt, dd");
+ var currentKey;
+ elements.each(function() {
+ if (this.nodeName.toLowerCase() === "dt") {
+ currentKey = d3.select(this).text();
+ } else if (currentKey && this.nodeName.toLowerCase() === "dd") {
+ node.properties().set(currentKey, d3.select(this).text());
+ }
+ })
+ })
+ });
+
+ selection.selectAll(".graph-diagram-relationship").each(function () {
+ var relationshipMarkup = d3.select(this);
+ var fromId = relationshipMarkup.attr("data-from");
+ var toId = relationshipMarkup.attr("data-to");
+ var relationship = model.createRelationship(model.lookupNode(fromId), model.lookupNode(toId));
+ relationship.class(relationshipMarkup.attr("class") || "");
+ relationshipMarkup.select("span.graph-diagram-relationship-type" ).each(function() {
+ relationship.label(d3.select(this).text());
+ });
+ });
+
+ return model;
+ };
+
+ markup.format = function(model, container) {
+ var ul = container.append("ul")
+ .attr("class", "graph-diagram-markup")
+ .attr("data-internal-scale", model.internalScale())
+ .attr("data-external-scale", model.externalScale());
+
+ model.nodeList().forEach(function(node) {
+ var li = ul.append("li")
+ .attr("class", node.class().join(" "))
+ .attr("data-node-id", node.id)
+ .attr("data-x", node.x())
+ .attr("data-y", node.y());
+
+ if (node.label()) {
+ li.append("span")
+ .attr("class", "graph-diagram-in-node-caption")
+ .text(node.label());
+ }
+
+ if (node.properties().list().length > 0) {
+ var dl = li.append("dl")
+ .attr("class", "graph-diagram-properties");
+
+ node.properties().list().forEach(function(property) {
+ dl.append("dt")
+ .text(property.key);
+ dl.append("dd")
+ .text(property.value);
+ });
+ }
+ });
+
+ model.relationshipList().forEach(function(relationship) {
+ var li = ul.append("li")
+ .attr("class", relationship.class().join(" "))
+ .attr("data-from", relationship.start.id)
+ .attr("data-to", relationship.end.id);
+
+ if (relationship.label()) {
+ li.append("span")
+ .attr("class", "graph-diagram-relationship-type")
+ .text(relationship.label());
+ }
+ });
+ };
+
+ return markup;
+ }();
+
+ gd.horizontalArrowOutline = function(start, end) {
+ var shaftRadius = 4;
+ var headRadius = 15;
+ var headLength = 30;
+ var shoulder = start < end ? end - headLength : end + headLength;
+ return ["M", start, shaftRadius,
+ "L", shoulder, shaftRadius,
+ "L", shoulder, headRadius,
+ "L", end, 0,
+ "L", shoulder, -headRadius,
+ "L", shoulder, -shaftRadius,
+ "L", start, -shaftRadius,
+ "Z"].join(" ");
+ };
+
+ gd.chooseSpeechBubbleOrientation = function(focusNode, relatedNodes) {
+ var orientations = [
+ { key: "WEST" , style: "horizontal", mirrorX: -1, mirrorY: 1, angle: 180 },
+ { key: "NORTH-WEST" , style: "diagonal", mirrorX: -1, mirrorY: -1, angle: -135 },
+ { key: "NORTH" , style: "vertical", mirrorX: 1, mirrorY: -1, angle: -90 },
+ { key: "NORTH-EAST" , style: "diagonal", mirrorX: 1, mirrorY: -1, angle: -45 },
+ { key: "EAST" , style: "horizontal", mirrorX: 1, mirrorY: 1, angle: 0 },
+ { key: "SOUTH-EAST" , style: "diagonal", mirrorX: 1, mirrorY: 1, angle: 45 },
+ { key: "SOUTH" , style: "vertical", mirrorX: 1, mirrorY: 1, angle: 90 },
+ { key: "SOUTH-WEST" , style: "diagonal", mirrorX: -1, mirrorY: 1, angle: 135 }
+ ];
+
+ orientations.forEach(function(orientation) {
+ orientation.closest = 180;
+ });
+
+ relatedNodes.forEach(function(relatedNode) {
+ orientations.forEach(function(orientation) {
+ var angle = Math.abs(focusNode.angleTo( relatedNode ) - orientation.angle);
+ if (angle > 180) angle = 360 - angle;
+ if (angle < orientation.closest) {
+ orientation.closest = angle;
+ }
+ });
+ });
+
+ var maxAngle = 0;
+ var bestOrientation = orientations[0];
+ orientations.forEach(function(orientation) {
+ if (orientation.closest > maxAngle) {
+ maxAngle = orientation.closest;
+ bestOrientation = orientation;
+ }
+ });
+
+ return bestOrientation;
+ };
+
+ gd.speechBubblePath = function(textSize, style, margin, padding) {
+ var width = textSize.width, height = textSize.height;
+ var styles = {
+ diagonal: [
+ "M", 0, 0,
+ "L", margin + padding, margin,
+ "L", margin + width + padding, margin,
+ "A", padding, padding, 0, 0, 1, margin + width + padding * 2, margin + padding,
+ "L", margin + width + padding * 2, margin + height + padding,
+ "A", padding, padding, 0, 0, 1, margin + width + padding, margin + height + padding * 2,
+ "L", margin + padding, margin + height + padding * 2,
+ "A", padding, padding, 0, 0, 1, margin, margin + height + padding,
+ "L", margin, margin + padding,
+ "Z"
+ ],
+ horizontal: [
+ "M", 0, 0,
+ "L", margin, -padding,
+ "L", margin, -height / 2,
+ "A", padding, padding, 0, 0, 1, margin + padding, -height / 2 - padding,
+ "L", margin + width + padding, -height / 2 - padding,
+ "A", padding, padding, 0, 0, 1, margin + width + padding * 2, -height / 2,
+ "L", margin + width + padding * 2, height / 2,
+ "A", padding, padding, 0, 0, 1, margin + width + padding, height / 2 + padding,
+ "L", margin + padding, height / 2 + padding,
+ "A", padding, padding, 0, 0, 1, margin, height / 2,
+ "L", margin, padding,
+ "Z"
+ ],
+ vertical: [
+ "M", 0, 0,
+ "L", -padding, margin,
+ "L", -width / 2, margin,
+ "A", padding, padding, 0, 0, 0, -width / 2 - padding, margin + padding,
+ "L", -width / 2 - padding, margin + height + padding,
+ "A", padding, padding, 0, 0, 0, -width / 2, margin + height + padding * 2,
+ "L", width / 2, margin + height + padding * 2,
+ "A", padding, padding, 0, 0, 0, width / 2 + padding, margin + height + padding,
+ "L", width / 2 + padding, margin + padding,
+ "A", padding, padding, 0, 0, 0, width / 2, margin,
+ "L", padding, margin,
+ "Z"
+ ]
+ };
+ return styles[style].join(" ");
+ };
+
+ gd.textDimensions = function() {
+ var textDimensions = {};
+
+ textDimensions.measure = function(text) {
+ var canvasSelection = d3.select("#textMeasuringCanvas").data([this]);
+ canvasSelection.enter().append("canvas")
+ .attr("id", "textMeasuringCanvas");
+
+ var canvas = canvasSelection.node();
+ var context = canvas.getContext("2d");
+ context.font = "normal normal normal 50px/normal Gill Sans";
+ return context.measureText(text).width;
+ };
+
+ return textDimensions;
+ }();
+})();
+
+function bind(graph, view, nodeBehaviour, relationshipBehaviour) {
+ nodeBehaviour = nodeBehaviour || function() {};
+ relationshipBehaviour = relationshipBehaviour || function() {};
+
+ function cx(d) {
+ return d.ex();
+ }
+ function cy(d) {
+ return d.ey();
+ }
+
+ function label(d) {
+ return d.label();
+ }
+
+ function hasProperties(d) {
+ return d.properties().list().length > 0;
+ }
+
+ function nodeClasses(d) {
+ return d.class().join(" ") + " " + "graph-diagram-node-id-" + d.id;
+ }
+
+ var nodes = view.selectAll("circle.graph-diagram-node")
+ .data(d3.values(graph.nodeList()));
+
+ nodes.exit().remove();
+
+ nodes.enter().append("svg:circle")
+ .attr("class", nodeClasses)
+ .attr("r", gd.parameters.radius)
+ .call(nodeBehaviour);
+
+ nodes
+ .attr("cx", cx)
+ .attr("cy", cy);
+
+ function horizontalArrow(d) {
+ var length = d.start.distanceTo(d.end);
+ var side = d.end.isLeftOf(d.start) ? -1 : 1;
+ return gd.horizontalArrowOutline(
+ side * (gd.parameters.radius + gd.parameters.nodeStartMargin),
+ side * (length - (gd.parameters.radius + gd.parameters.nodeEndMargin)));
+ }
+
+ function midwayBetweenStartAndEnd(d) {
+ var length = d.start.distanceTo(d.end);
+ var side = d.end.isLeftOf(d.start) ? -1 : 1;
+ return side * length / 2;
+ }
+
+ function translateToStartNodeCenterAndRotateToRelationshipAngle(d) {
+ var angle = d.start.angleTo(d.end);
+ if (d.end.isLeftOf(d.start)) {
+ angle += 180;
+ }
+ return "translate(" + d.start.ex() + "," + d.start.ey() + ") rotate(" + angle + ")";
+ }
+
+ function relationshipClasses(d) {
+ return d.class().join(" ");
+ }
+
+ var relationshipGroup = view.selectAll("g.graph-diagram-relationship")
+ .data(graph.relationshipList());
+
+ relationshipGroup.exit().remove();
+
+ relationshipGroup.enter().append("svg:g")
+ .attr("class", relationshipClasses);
+
+ relationshipGroup
+ .attr("transform", translateToStartNodeCenterAndRotateToRelationshipAngle);
+
+ function singleton(d) {
+ return [d];
+ }
+
+ var relationshipPath = relationshipGroup.selectAll("path.graph-diagram-relationship")
+ .data(singleton);
+
+ relationshipPath.enter().append("svg:path")
+ .attr("class", relationshipClasses)
+ .call(relationshipBehaviour);
+
+ relationshipPath
+ .attr("d", horizontalArrow);
+
+ function relationshipWithLabel(d) {
+ return [d].filter(label);
+ }
+
+ var relationshipLabel = relationshipGroup.selectAll("text.graph-diagram-relationship-label")
+ .data(relationshipWithLabel);
+
+ relationshipLabel.exit().remove();
+
+ relationshipLabel.enter().append("svg:text")
+ .attr("class", "graph-diagram-relationship-label")
+ .call(relationshipBehaviour);
+
+ relationshipLabel
+ .attr("x", midwayBetweenStartAndEnd)
+ .attr("y", 0 )
+ .text(label);
+
+ function renderBoundVariables(className) {
+ function boundVariableClasses(d) {
+ return className + " " + d.class();
+ }
+
+ var boundVariables = view.selectAll("text." + className)
+ .data(d3.values(graph.nodeList()).filter(label));
+
+ boundVariables.exit().remove();
+
+ boundVariables.enter().append("svg:text")
+ .attr("class", boundVariableClasses)
+ .call(nodeBehaviour);
+
+ boundVariables
+ .attr("x", cx)
+ .attr("y", cy)
+ .text(label);
+ }
+
+ renderBoundVariables("graph-diagram-bound-variable-shadow");
+ renderBoundVariables("graph-diagram-bound-variable");
+
+
+ var speechBubbleGroup = view.selectAll("g.speech-bubble")
+ .data(d3.values(graph.nodeList()).filter(hasProperties ).map(function (node) {
+ var relatedNodes = [];
+ graph.relationshipList().forEach(function(relationship) {
+ if (relationship.start === node) {
+ relatedNodes.push(relationship.end);
+ }
+ if (relationship.end === node) {
+ relatedNodes.push(relationship.start);
+ }
+ });
+ var orientation = gd.chooseSpeechBubbleOrientation(node, relatedNodes);
+
+ var propertyKeysWidth = d3.max(node.properties().list(), function(property) {
+ return gd.textDimensions.measure(property.key + ": ");
+ });
+ var propertyValuesWidth = d3.max(node.properties().list(), function(property) {
+ return gd.textDimensions.measure(property.value);
+ });
+ var textSize = {
+ width: propertyKeysWidth + propertyValuesWidth,
+ height: node.properties().list().length * 50
+ };
+
+ var mirror = "scale(" + orientation.mirrorX + "," + orientation.mirrorY + ") ";
+
+ var diagonalRadius = gd.parameters.radius * Math.sqrt(2) / 2;
+ var nodeOffsetOptions = {
+ diagonal: { attach: { x: diagonalRadius, y: diagonalRadius },
+ textCorner: {
+ x: gd.parameters.speechBubbleMargin + gd.parameters.speechBubblePadding,
+ y: gd.parameters.speechBubbleMargin + gd.parameters.speechBubblePadding
+ } },
+ horizontal: { attach: { x: gd.parameters.radius, y: 0 },
+ textCorner: {
+ x: gd.parameters.speechBubbleMargin + gd.parameters.speechBubblePadding,
+ y: -textSize.height / 2
+ } },
+ vertical: { attach: { x: 0, y: gd.parameters.radius },
+ textCorner: {
+ x: -textSize.width / 2,
+ y: gd.parameters.speechBubbleMargin + gd.parameters.speechBubblePadding
+ } }
+ };
+ var nodeCenterOffset = nodeOffsetOptions[orientation.style].attach;
+ var textCorner = nodeOffsetOptions[orientation.style].textCorner;
+
+ var translate = "translate(" + (node.ex() + nodeCenterOffset.x * orientation.mirrorX) + ","
+ + (node.ey() + nodeCenterOffset.y * orientation.mirrorY) + ") ";
+
+ return {
+ properties: node.properties().list().map(function(property) {
+ return {
+ keyText: property.key + ": ",
+ valueText: property.value,
+ textOrigin: {
+ x: propertyKeysWidth + orientation.mirrorX * (textCorner.x)
+ - (orientation.mirrorX == -1 ? textSize.width : 0),
+ y: orientation.mirrorY * (textCorner.y)
+ - (orientation.mirrorY == -1 ? textSize.height : 0)
+ }
+ }
+ }),
+ groupTransform: translate,
+ outlineTransform: mirror,
+ outlinePath: gd.speechBubblePath( textSize, orientation.style,
+ gd.parameters.speechBubbleMargin, gd.parameters.speechBubblePadding )
+ };
+ }));
+
+ speechBubbleGroup.exit().remove();
+
+ speechBubbleGroup.enter().append("svg:g")
+ .attr("class", "speech-bubble");
+
+ speechBubbleGroup
+ .attr("transform", function(speechBubble) { return speechBubble.groupTransform; } );
+
+ var speechBubbleOutline = speechBubbleGroup.selectAll("path.speech-bubble-outline")
+ .data(singleton);
+
+ speechBubbleOutline.exit().remove();
+
+ speechBubbleOutline.enter().append("svg:path")
+ .attr("class", "speech-bubble-outline");
+
+ speechBubbleOutline
+ .attr("transform", function(speechBubble) { return speechBubble.outlineTransform; })
+ .attr("d", function(speechBubble) { return speechBubble.outlinePath; });
+
+ var propertyKeys = speechBubbleGroup.selectAll("text.speech-bubble-content.property-key")
+ .data(function(speechBubble) { return speechBubble.properties; });
+
+ propertyKeys.exit().remove();
+
+ propertyKeys.enter().append("svg:text")
+ .attr("class", "speech-bubble-content property-key");
+
+ propertyKeys
+ .attr("x", function(property) { return property.textOrigin.x - 10; })
+ // -10 because trailing space gets trimmed
+ .attr("y", function(property, i) {
+ return i * 50 + property.textOrigin.y + 25
+ })
+ .text(function(property) { return property.keyText; });
+
+ var propertyValues = speechBubbleGroup.selectAll("text.speech-bubble-content.property-value")
+ .data(function(speechBubble) { return speechBubble.properties; });
+
+ propertyValues.exit().remove();
+
+ propertyValues.enter().append("svg:text")
+ .attr("class", "speech-bubble-content property-value");
+
+ propertyValues
+ .attr("x", function(property) { return property.textOrigin.x; })
+ .attr("y", function(property, i) {
+ return i * 50 + property.textOrigin.y + 25
+ })
+ .text(function(property) { return property.valueText; });
+}
View
3  routes/index.js
@@ -9,6 +9,9 @@ exports.index = function(req, res){
exports.index_graph = function(req, res){
res.render('index_graph', { category: '', title: 'Start' });
};
+exports.index_graph_svg = function(req, res){
+ res.render('index_graph_svg', { category: '', title: 'Start' });
+};
/*
View
282 views/index_graph.ejs
@@ -1,16 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
- <script type="text/javascript" src="/assets/js/graph-diagram.js"></script>
- <link rel="stylesheet" href="/assets/css/graph-diagram.css" type="text/css">
- <script type="text/javascript" src="/assets/js/d3.v2.js"></script>
- <!--<link rel="stylesheet" href="/assets/css/graph-editor.css" type="text/css">-->
<!-- Google Analytics Content Experiment code -->
<script>
_udn = "www.neo4j.org";
</script>
- <!--<script>function utmx_section(){}function utmx(){}(function(){var
+ <script>function utmx_section(){}function utmx(){}(function(){var
k='2722339-1',d=document,l=d.location,c=d.cookie;
if(l.search.indexOf('utm_expid='+k)>0)return;
function f(n){if(c){var i=c.indexOf(n+'=');if(i>-1){var j=c.
@@ -21,10 +17,10 @@
'&utmx='+(x?x:'')+'&utmxx='+(xx?xx:'')+'&utmxtime='+new Date().
valueOf()+(h?'&utmxhash='+escape(h.substr(1)):'')+
'" type="text/javascript" charset="utf-8"><\/sc'+'ript>')})();
- </script><script>utmx('url','A/B');</script>-->
+ </script><script>utmx('url','A/B');</script>
<!-- End of Google Analytics Content Experiment code -->
<meta charset="utf-8">
- <title><%= title %> - Neo4j: The World&#39; Leading Graph Database</title>
+ <title>Start - Neo4j: The World&#39; Leading Graph Database</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Neo4j is an open-source, NoSQL graph database supported by Neo Technology.">
@@ -35,16 +31,13 @@
<link href="/assets/css/bootstrap-responsive.css" rel="stylesheet">
<link href="/assets/css/bootstrap-lightbox.css" rel="stylesheet">
- <link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic'
- rel='stylesheet' type='text/css'>
- <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,400,600,300'
- rel='stylesheet' type='text/css'>
- <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic'
- rel='stylesheet' type='text/css'>
+ <link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
+ <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,400,600,300' rel='stylesheet' type='text/css'>
+ <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic' rel='stylesheet' type='text/css'>
<!-- Random Pick-a-Theme -->
- <link href="/themes/<%= theme() %>/css/style.css" rel="stylesheet">
+ <link href="/themes/aqua/css/style.css" rel="stylesheet">
<link href="/assets/css/neo.css" rel="stylesheet">
<!--<link href="/assets/css/neo4j.css" rel="stylesheet">-->
@@ -74,7 +67,7 @@
ref.parentNode.insertBefore(div, ref);
- window.onload = function () {
+ window.onload = function() {
div.parentNode.removeChild(div);
}
@@ -84,43 +77,234 @@
</head>
<body data-spy="scroll" data-target=".spyme">
-<figure class="graph-diagram">
- <svg xmlns="http://www.w3.org/2000/svg" class="graph-diagram pre-sized" height="100%" width="100%"
- viewBox="-79.15166672497259 -725.266302511501 1592.4500990146537 1583.5859796517402"></svg>
-
- <ul class="graph-diagram-markup" data-internal-scale="2" data-external-scale="3">
- <li class="graph-diagram-node" data-node-id="0" data-x="300" data-y="0" href="/learn">
- <span class="graph-diagram-in-node-caption">learn</span>
- </li>
- <li class="graph-diagram-node" data-node-id="1" data-x="-50" data-y="-50">
- <span class="graph-diagram-in-node-caption">graph database</span><dl class="graph-diagram-properties"><dt>is</dt><dd>cool</dd></dl></li>
-
- <li class="graph-diagram-relationship" data-from="0" data-to="1">
- <span class="graph-diagram-relationship-type">use via</span>
- </li>
- </ul>
-
-</figure>
+
+<div class="container">
+ <div class="row">
+ <div id="hero">
+ <div class="span12 pagination-centered">
+ <h2 class=""><a class="brand logo" id="fix" href="/"><img src="/assets/img/neo4j/logo-white.svg" width="80px" alt="Neo4J World's Leading Graph Database"> </a>Neo4j</h2>
+ <br />
+ <span id="tag">The Graph Database.</span><br />
+
+ <p class="lead"><strong>Neo4j is an open-source, high-performance, NOSQL graph database, optimized for superfast graph traversals.</strong></p>
+
+ <p>Easily model and change the full complexity of your system.</p>
+ <!--<a href="/install" class="btn btn-large btn-success" type="button"><i class="icon-download-alt"></i> Download</a>-->
+ </div>
+ </div>
+ </div>
+</div>
+<script src="/assets/js/jquery-ui.min.js" type="text/javascript"></script>
+<script src="/assets/js/jquery.jsPlumb-1.3.16-all-min.js" type="text/javascript"></script>
+<script src="/assets/js/index-graph.js" type="text/javascript"></script>
+
+<div class="container" style="height: 200px;">
+ <div id="download" class="node" style="left: 40%;top:325px;">
+ <div>
+ <h2><a href="/install"><i class="icon icon-download-alt"></i>Install</a></h2>
+
+ <p>Try Neo4j for yourself.</p></div>
+ </div>
+ <div id="learn" class="node" style="left: 15%;top:530px">
+ <div><h2><a href="/learn"><i class="icon icon-book"></i>Learn</a></h2>
+
+ <p>What is Neo4j? What can I do with it?</p></div>
+ </div>
+ <div id="develop" class="node" style="left: 40%;top:530px;">
+ <div><h2><a href="/develop"><i class="icon icon-cogs"></i>Develop</a></h2>
+
+ <p>Tutorials, installation, drivers, sample apps.</p></div>
+ </div>
+ <div id="participate" class="node" style="left: 65%;top:530px;">
+ <div><h2><a href="/participate"><i class="icon icon-refresh"></i>Participate</a></h2>
+
+ <p>Join the Neo4j Community.</p></div>
+ </div>
+</div>
+
+</div> <!-- /container -->
+
+<footer>
+ <div class="footer">
+ <div class="row" id="sitemap">
+ <div class="container">
+ <div class="span2">
+ <ul>
+ <li class="fheader"><i class="icon icon-book"></i>Learn</li>
+ <li><a href="/learn/graphdatabase">Graph Database</a></li>
+ <li><a href="/learn/neo4j">What is Neo4j</a></li>
+ <li><a href="/learn/cypher">Query Tutorial</a></li>
+ <li><a href="/learn/nosql">NoSQL Data Models</a></li>
+ <li><a href="/learn/apps">Apps Gallery</a></li>
+ <li><a href="http://www.neotechnology.com/customers/" target="_blank">Customers & Use cases</a></li>
+ <li><a href="/learn/licensing">Licensing Guide</a></li>
+ </ul>
+ </div>
+ <div class="span2">
+ <ul>
+ <li class="fheader"><i class="icon icon-cogs"></i>Develop</li>
+ <li><a href="/develop#install">Install Neo4j</a></li>
+ <li><a href="/develop#cloud">Cloud</a></li>
+ <li><a href="/learn/try" >Try Live</a></li>
+ <li><a href="/develop/drivers">Language drivers</a></li>
+ <li><a href="/develop/visualize">Visualization</a></li>
+ <li><a href="/develop/example_data">Sample Datasets</a></li>
+ <li><a href="/develop/spring">Spring Data Neo4j</a></li>
+ </ul>
+ </div>
+ <div class="span2">
+ <ul>
+ <li class="fheader" ><i class="icon icon-refresh"></i>Participate</li>
+ <li><a href="/participate/contributors">Contributors</a></li>
+ <li><a href="http://stackoverflow.com/search?q=neo4j" target="_blank">Stack Overflow</a></li>
+ <li><a href="http://neo4j.meetup.com" target="_blank">Meetups</a></li>
+ <li><a href="https://groups.google.com/group/neo4j/" target="_blank">Google Group</a></li>
+ <li><a href="http://www.github.com/neo4j/neo4j" target="_blank">GitHub</a></li>
+ </ul>
+ </div>
+ <div class="span2">
+ <ul>
+ <li class="fheader" ><img src="/assets/img/neo4j/neo4j-aqua.svg" width="16px" align="left" alt="Neo4j">Quick Links</li>
+ <li><a href="/install">Install</a></li>
+ <li><a href="http://docs.neo4j.org" target="_blank">Neo4j Manual</a></li>
+ <li><a href="/learn/try" >Try Live</a></li>
+ <li><a href="http://watch.neo4j.org" target="_blank">Videos</a></li>
+ </ul>
+ </div>
+
+ <div class="span2 sitelinks">
+ <ul>
+ <li><a href="http://blog.neo4j.org" target="_blank"><i class="icon-bookmark"></i> Neo4j&nbsp;Blog</a></li>
+ <li><a href="https://twitter.com/neo4j" target="_blank"><i class="icon-twitter"></i> Twitter</a></li>
+ <li><a href="http://www.linkedin.com/groups?gid=2623939" target="_blank"><i class="icon-linkedin"></i> LinkedIn</a></li>
+ <li><a href="http://info.neotechnology.com/contactus.html" target="_blank"><i class="icon-phone"></i> Contact Us</a></li>
+ </ul>
+ <div class="subscribe">
+ Please keep me updated about Neo4j events, releases and articles.
+ <iframe src="http://info.neotechnology.com/2012Newsletters_NewsletterSubscriptioniframe.html" onload="this.style.visibility = 'visible';" style="border:0;padding: 0;" width="300px" height="100px" frameborder=”0” scrolling="no"></iframe>
+ </div>
+
+
+ </div>
+ </div>
+ </div>
+
+ <div class="row footer-gray">
+ <div class="container">
+ <div class="span12 fcompany">
+ <p class="pull-left">&copy; 2012 <a href="http://neotechnology.com">Neo Technology</a>, Inc. &nbsp; Graphs are Everywhere. &nbsp; &nbsp; <a href="/terms" class="legal">Terms</a> | <a href="/privacy" class="legal">Privacy Policy</a></p>
+ </div>
+ </div>
+ </div>
+ <div class="row">
+ <div class="container">
+ <div class="span12">
+ <h3>Got feedback? Can't find what you are looking for? Tell us!</h3>
+ <div id="disqus_thread"></div>
+ </div>
+ </div>
+ </div>
+ <script type="text/javascript">
+ //are we live?
+ var disqus_url = window.location;
+ console.log('current URL: ',disqus_url);
+ var origin = disqus_url.origin;
+ if(origin != 'www.neo4j.org') {
+ console.log('this site is not live at ', origin, 'switching to disqus developer mode');
+ var disqus_developer = 1; // developer mode is on
+ } else {
+ var disqus_developer = 0; // developer mode is off
+ }
+ /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
+ var disqus_shortname = 'neo4jorglive'; // required: replace example with your forum shortname
+ /* * * DON'T EDIT BELOW THIS LINE * * */
+ (function() {
+ var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
+ dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
+ (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
+ })();
+ </script>
+ <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
+ <a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
+ </div>
+
+</footer>
+
+
+
+<!-- javascript
+================================================== -->
+<!-- Placed at the end of the document so the pages load faster -->
+<script src="/assets/js/jquery-1.8.1.min.js" type="text/javascript"></script>
+<script src="/assets/js/bootstrap.js" type="text/javascript"></script>
+<script src="/assets/js/jquery.isotope.min.js" type="text/javascript"></script>
+<script src="/assets/js/bootstrap-iso.js" type="text/javascript"></script>
+<script src="/assets/js/bootstrap-lightbox.js" type="text/javascript"></script>
+<script src="/assets/js/bootstrap-transition.js" type="text/javascript"></script>
+<script src="/assets/js/bootstrap-dropdown.js" type="text/javascript"></script>
+<script type="text/javascript">
+ // $('#marketing-slider').revolver({transition: {type: 'fade'}});
+</script>
<script type="text/javascript">
- var test ;
- d3.selectAll("figure.graph-diagram").each(function () {
- var graph = gd.markup.parse(d3.select(this).select("ul.graph-diagram-markup"));
- test = graph;
- console.log(test);
- var diagramView = d3.select(this).selectAll("svg.graph-diagram").data([graph]);
-
- diagramView
- .enter()
- .append("svg:svg")
- .attr("class", "graph-diagram");
-
- bind(graph, diagramView);
-
- if (!diagramView.classed("pre-sized")) {
- gd.scaling.sizeSvgToFitDiagram(graph, diagramView);
+
+ var _gaq = _gaq || [];
+ _gaq.push(['_setAccount', 'UA-1192232-3']);
+ _gaq.push(['_setDomainName', 'www.neo4j.org']);
+ _gaq.push(['_setAllowLinker', true]);
+ _gaq.push(['_setCustomVar',
+ 3, // This custom var is set to slot #3. Required parameter.
+ 'site_version', // The name acts as a kind of category for the user activity. Required parameter.
+ '111' // This value of the custom variable. Required parameter.
+ ]);
+ _gaq.push(['_trackPageview']);
+
+ (function () {
+ var ga = document.createElement('script');
+ ga.type = 'text/javascript';
+ ga.async = true;
+ //debugging the tracker
+ ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/u/ga_debug.js';
+// ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+ var s = document.getElementsByTagName('script')[0];
+ s.parentNode.insertBefore(ga, s);
+ })();
+
+</script>
+
+<script type="text/javascript">
+
+ $.ajax({
+ url: document.location.protocol + '//munchkin.marketo.net/munchkin.js',
+ dataType: 'script',
+ cache: true,
+ success: function() {
+ Munchkin.init('773-GON-065');
}
});
+
+</script>
+<script type="text/javascript">
+ /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
+ var disqus_shortname = 'neo4jorglive';
+ //are we live?
+ var disqus_url = window.location;
+ console.log('current URL: ',disqus_url);
+ var origin = disqus_url.origin;
+ if(origin != 'www.neo4j.org') {
+ console.log('this site is not live at ', origin, 'switching to disqus developer mode');
+ var disqus_developer = 1; // developer mode is on
+ } else {
+ var disqus_developer = 0; // developer mode is off
+ }
+ /* * * DON'T EDIT BELOW THIS LINE * * */
+ (function () {
+ var s = document.createElement('script'); s.async = true;
+ s.type = 'text/javascript';
+ s.src = 'http://' + disqus_shortname + '.disqus.com/count.js';
+ (document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
+ }());
</script>
-<% include foot %>
+</body>
+</html>
View
125 views/index_graph_svg.ejs
@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <script type="text/javascript" src="/assets/js/graph-diagram.js"></script>
+ <link rel="stylesheet" href="/assets/css/graph-diagram.css" type="text/css">
+ <script type="text/javascript" src="/assets/js/d3.v2.js"></script>
+ <!-- Google Analytics Content Experiment code -->
+ <script>
+ _udn = "www.neo4j.org";
+ </script>
+
+ <!--<script>function utmx_section(){}function utmx(){}(function(){var
+ k='2722339-1',d=document,l=d.location,c=d.cookie;
+ if(l.search.indexOf('utm_expid='+k)>0)return;
+ function f(n){if(c){var i=c.indexOf(n+'=');if(i>-1){var j=c.
+ indexOf(';',i);return escape(c.substring(i+n.length+1,j<0?c.
+ length:j))}}}var x=f('__utmx'),xx=f('__utmxx'),h=l.hash;d.write(
+ '<sc'+'ript src="'+'http'+(l.protocol=='https:'?'s://ssl':
+ '://www')+'.google-analytics.com/ga_exp.js?'+'utmxkey='+k+
+ '&utmx='+(x?x:'')+'&utmxx='+(xx?xx:'')+'&utmxtime='+new Date().
+ valueOf()+(h?'&utmxhash='+escape(h.substr(1)):'')+
+ '" type="text/javascript" charset="utf-8"><\/sc'+'ript>')})();
+ </script><script>utmx('url','A/B');</script>-->
+ <!-- End of Google Analytics Content Experiment code -->
+ <meta charset="utf-8">
+ <title><%= title %> - Neo4j: The World&#39; Leading Graph Database</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta name="description" content="Neo4j is an open-source, NoSQL graph database supported by Neo Technology.">
+
+ <!-- Styles -->
+
+ <link href="/assets/css/font-awesome.css" rel="stylesheet">
+ <link href="/assets/css/bootstrap.css" rel="stylesheet">
+ <link href="/assets/css/bootstrap-responsive.css" rel="stylesheet">
+ <link href="/assets/css/bootstrap-lightbox.css" rel="stylesheet">
+
+ <link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic'
+ rel='stylesheet' type='text/css'>
+ <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,400,600,300'
+ rel='stylesheet' type='text/css'>
+ <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic'
+ rel='stylesheet' type='text/css'>
+
+ <!-- Random Pick-a-Theme -->
+
+ <link href="/themes/<%= theme() %>/css/style.css" rel="stylesheet">
+ <link href="/assets/css/neo.css" rel="stylesheet">
+ <!--<link href="/assets/css/neo4j.css" rel="stylesheet">-->
+
+ <link href="/assets/css/bootstrap-responsive.css" rel="stylesheet">
+
+ <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
+ <!--[if lt IE 9]>
+ <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+ <![endif]-->
+
+ <!-- Le fav and touch icons -->
+ <link rel="shortcut icon" href="/assets/ico/favicon.png">
+ <link rel="apple-touch-icon" href="/assets/ico/apple-touch-icon.png">
+ <link rel="apple-touch-icon" sizes="72x72" href="/assets/ico/apple-touch-icon-72x72.png">
+ <link rel="apple-touch-icon" sizes="114x114" href="/assets/ico/apple-touch-icon-114x114.png">
+
+ <script src="/assets/js/jquery-1.8.1.min.js" type="text/javascript"></script>
+ <script src="/assets/js/neo4j.js" type="text/javascript"></script>
+
+ <!-- hide iframe white flash -->
+ <script type="text/javascript">
+ (function () {
+ var div = document.createElement('div'),
+ ref = document.getElementsByTagName('base')[0] || document.getElementsByTagName('script')[0];
+
+ div.innerHTML = '&shy;<style> iframe { visibility: hidden; } </style>';
+
+ ref.parentNode.insertBefore(div, ref);
+
+ window.onload = function () {
+ div.parentNode.removeChild(div);
+ }
+
+ })();
+ </script>
+
+</head>
+
+<body data-spy="scroll" data-target=".spyme">
+<figure class="graph-diagram">
+ <svg xmlns="http://www.w3.org/2000/svg" class="graph-diagram pre-sized" height="100%" width="100%"
+ viewBox="-79.15166672497259 -725.266302511501 1592.4500990146537 1583.5859796517402"></svg>
+
+ <ul class="graph-diagram-markup" data-internal-scale="2" data-external-scale="3">
+ <li class="graph-diagram-node" data-node-id="0" data-x="300" data-y="0" href="/learn">
+ <span class="graph-diagram-in-node-caption">learn</span>
+ </li>
+ <li class="graph-diagram-node" data-node-id="1" data-x="-50" data-y="-50">
+ <span class="graph-diagram-in-node-caption">graph database</span><dl class="graph-diagram-properties"><dt>is</dt><dd>cool</dd></dl></li>
+
+ <li class="graph-diagram-relationship" data-from="0" data-to="1">
+ <span class="graph-diagram-relationship-type">use via</span>
+ </li>
+ </ul>
+
+</figure>
+
+<script type="text/javascript">
+ var test ;
+ d3.selectAll("figure.graph-diagram").each(function () {
+ var graph = gd.markup.parse(d3.select(this).select("ul.graph-diagram-markup"));
+ test = graph;
+ console.log(test);
+ var diagramView = d3.select(this).selectAll("svg.graph-diagram").data([graph]);
+
+ diagramView
+ .enter()
+ .append("svg:svg")
+ .attr("class", "graph-diagram");
+
+ bind(graph, diagramView);
+
+ if (!diagramView.classed("pre-sized")) {
+ gd.scaling.sizeSvgToFitDiagram(graph, diagramView);
+ }
+ });
+</script>
+
+<% include foot %>
Please sign in to comment.
Something went wrong with that request. Please try again.