via Washington Post
via Washington Post
start department = node:Department(name='Widgets')
match employee -[:works_in]-> sub_department
-[0..*:parent]-> department
return employee
var circles = view.selectAll("circle.node") // selection query
.data(nodes); // nodes is the model
circles.exit().remove();
circles.enter().append("circle") // tag matches selection query
.attr("class", "node"); // class matches selection query
// other attributes that will not change when the model changes
circles
.attr("cx", function(node) { return node.x; })
.attr("cy", function(node) { return node.y; })
.attr("r", function(node) { return node.radius; });
// other attributes that may change when the model changes
var tables = [
{ rows: [
{ cells: [ { content: 'A' }, { content: 'B' } ] },
{ cells: [ { content: 'C' }, { content: 'D' } ] }
] },
{ rows: [
{ cells: [ { content: '1' }, { content: '2' }, { content: '3' } ] },
{ cells: [ { content: '4' }, { content: '5' }, { content: '6' } ] },
{ cells: [ { content: '7' }, { content: '8' }, { content: '9' } ] }
] }
];
var tableSelection = d3.select( "#nested_example" ).selectAll( "table" )
.data(tables);
tableSelection.exit().remove();
tableSelection.enter().append("table");
var rowSelection = tableSelection.selectAll("tr")
.data(function(table) { return table.rows; });
rowSelection.exit().remove();
rowSelection.enter().append("tr");
var cellSelection = rowSelection.selectAll("td")
.data(function(row) { return row.cells; });
cellSelection.exit().remove();
cellSelection.enter().append("td");
cellSelection.text(function(cell) { return cell.content; });
function identity(d) { return d; }
function singleton(d) { return [d]; }
textDimensions.measure = function ( text, styleSource ) {
var fontSize = styleSource.style( "font-size" );
var fontFamily = styleSource.style( "font-family" );
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 " + fontSize + "/normal " + fontFamily;
return context.measureText(text).width;
};
Slides: http://www.apcjones.com/talks/2013-06-11_D3_London/
Visual graph editor: http://www.apcjones.com/arrows/
Graph diagram library: https://github.com/apcj/arrows
Alistair Jones
@apcj
alistair.jones@neotechnology.com