Mercurial > hg > NetworkVis
view d3s_examples/python-neo4jrestclient/static/index_movie.html @ 39:88c5232f9d48 default tip
fix click on author name.
| author | casties |
|---|---|
| date | Thu, 04 Feb 2016 18:56:48 +0100 |
| parents | 18ef6948d689 |
| children |
line wrap: on
line source
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="http://neo4j-contrib.github.io/developer-resources/language-guides/assets/css/main.css"> <title>Neo4j Movies</title> </head> <body> <div id="graph"> </div> <div role="navigation" class="navbar navbar-default navbar-static-top"> <div class="container"> <div class="row"> <div class="col-sm-6 col-md-6"> <ul class="nav navbar-nav"> <li> <form role="search" class="navbar-form" id="search"> <div class="form-group"> <input type="text" value="Matrix" placeholder="Search for Movie Title" class="form-control" name="search"> </div> <button class="btn btn-default" type="submit">Search</button> </form> </li> </ul> </div> <div class="navbar-header col-sm-6 col-md-6"> <div class="logo-well"> <a href="http://neo4j.com/developer-resources"> <img src="http://neo4j-contrib.github.io/developer-resources/language-guides/assets/img/logo-white.svg" alt="Neo4j World's Leading Graph Database" id="logo"> </a> </div> <div class="navbar-brand"> <div class="brand">Neo4j Movies</div> </div> </div> </div> </div> </div> <div class="row"> <div class="col-md-5"> <div class="panel panel-default"> <div class="panel-heading">Search Results</div> <table id="results" class="table table-striped table-hover"> <thead> <tr> <th>Movie</th> <th>Released</th> <th>Tagline</th> </tr> </thead> <tbody> </tbody> </table> </div> </div> <div class="col-md-7"> <div class="panel panel-default"> <div class="panel-heading" id="title">Details</div> <div class="row"> <div class="col-sm-4 col-md-4"> <img src="" class="well" id="poster"/> </div> <div class="col-md-8 col-sm-8"> <h4>Crew</h4> <ul id="crew"> </ul> </div> </div> </div> </div> </div> <style type="text/css"> .node { stroke: #222; stroke-width: 1.5px; } .node.actor { fill: #888; } .node.movie { fill: #BBB; } .link { stroke: #999; stroke-opacity: .6; stroke-width: 1px; } </style> <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script src="http://d3js.org/d3.v3.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { function showMovie(title) { $.get("/movie/" + encodeURIComponent(title), function (data) { if (!data) return; $("#title").text(data.title); $("#poster").attr("src","http://neo4j-contrib.github.io/developer-resources/language-guides/assets/posters/"+encodeURIComponent(data.title)+".jpg"); var $list = $("#crew").empty(); data.cast.forEach(function (cast) { $list.append($("<li>" + cast.name + " " +cast.job + (cast.job == "acted"?" as " + cast.role : "") + "</li>")); }); }, "json"); return false; } function search() { var query=$("#search").find("input[name=search]").val(); $.get("/search?q=" + encodeURIComponent(query), function (data) { var t = $("table#results tbody").empty(); if (!data || data.length == 0) return; data.forEach(function (row) { var movie = row.movie; $("<tr><td class='movie'>" + movie.title + "</td><td>" + movie.released + "</td><td>" + movie.tagline + "</td></tr>").appendTo(t) .click(function() { showMovie($(this).find("td.movie").text());}) }); showMovie(data[0].movie.title); }, "json"); return false; } $("#search").submit(search); search(); }) </script> <script type="text/javascript"> var width = 800, height = 800; var force = d3.layout.force() .charge(-200).linkDistance(30).size([width, height]); var svg = d3.select("#graph").append("svg") .attr("width", "100%").attr("height", "100%") .attr("pointer-events", "all"); d3.json("/graph", function(error, graph) { if (error) return; var link = svg.selectAll(".link") .data(graph.links).enter() .append("line") .attr("class", "link"); var linklabel = svg.selectAll(".linklabel") .data(graph.links).enter() .append("text") .text("MYTEXT"); // .attr("dx", function(d) { return d.source.x; }) // .attr("dy", function(d) { return d.source.y; }) // .text("MYTEXT"); var gnodes = svg.selectAll('g.gnode') .data(graph.nodes) .enter() .append('g') .classed('gnode', true); var node = gnodes.append("circle") .attr("class", function (d) { return "node "+d.label }) .attr("r", 10) .call(force.drag); var label =gnodes.append("text") .text(function(d) { return d.title; }) // html title attribute node.append("title") .text(function (d) { return d.title; }); // force feed algo ticks force.on("tick", function() { link.attr("x1", function(d) { return d.source.x; }) .attr("y1", function(d) { return d.source.y; }) .attr("x2", function(d) { return d.target.x; }) .attr("y2", function(d) { return d.target.y; }); linklabel.attr("x", function(d) { return d.source.x + (d.target.x - d.source.x)/2; }) .attr("y", function(d) { return d.source.y + (d.target.y - d.source.y)/2; }) //gnode.attr("cx", function(d) { return d.x; }) // .attr("cy", function(d) { return d.y; }); gnodes.attr("transform", function(d) { return 'translate(' + [d.x, d.y] + ')'; }); }); ; var linkText = svg.selectAll(".link") .data(graph.links) .append("text") .attr("font-family", "Arial, Helvetica, sans-serif") .attr("x",0) .attr("y",0) // .attr("x", function(d) { // if (d.target.x > d.source.x) { // return (d.source.x + (d.target.x - d.source.x)/2); } // else { // return (d.target.x + (d.source.x - d.target.x)/2); } // }) // .attr("y", function(d) { // if (d.target.y > d.source.y) { // return (d.source.y + (d.target.y - d.source.y)/2); } // else { // return (d.target.y + (d.source.y - d.target.y)/2); } // }) .attr("fill", "Black") .style("font", "normal 12px Arial") .attr("dy", ".035em") .text(function(d) { return "HUHU3"; }); force.nodes(graph.nodes).links(graph.links).start(); }); </script> </body> </html>