You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
170 lines
3.7 KiB
HTML
170 lines
3.7 KiB
HTML
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<script src="{{ url_for("static", filename="js/d3.min.js") }}"></script>
|
|
<script src="{{ url_for("static", filename="js/jquery-3.3.1.min.js") }}"></script>
|
|
<style>
|
|
body{
|
|
width:100%;
|
|
height:100%;
|
|
padding: 0;
|
|
margin:0;
|
|
|
|
}
|
|
rect{
|
|
width: 40px;
|
|
height: 40px;
|
|
stroke: black;
|
|
fill: none;
|
|
}
|
|
svg{
|
|
width:100%;
|
|
height:100%;
|
|
padding: 0;
|
|
margin:0;
|
|
}
|
|
.bg{
|
|
fill: blue;
|
|
width: 100%;
|
|
height:100%;
|
|
}
|
|
|
|
.no_cover{
|
|
fill: yellow;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<script>
|
|
console.log("hello");
|
|
// d3.json("/api/books").then(function(data){
|
|
// console.log("loaded");
|
|
// console.log(data)
|
|
// var g = d3.select('body')
|
|
// .append('div')
|
|
// .append('div');
|
|
// g.selectAll("div.item")
|
|
// .data(data.books)
|
|
// .enter()
|
|
// .append("div")
|
|
// .attr("class", "item")
|
|
// .text(function(d){return d.title})
|
|
// .style("position", "absolute")
|
|
// .style("top", function (d) { return d.scapeY})
|
|
// .style("left", function (d) { return d.scapeX})
|
|
//
|
|
// }) //.err(function(err) {console.log("error!", err)})
|
|
d3.json("/api/books").then(function(data){
|
|
console.log("loaded");
|
|
console.log(data)
|
|
|
|
var svg = d3.select('body')
|
|
.append('svg');
|
|
|
|
var bounds = svg.node().getBoundingClientRect(),
|
|
width = bounds.width, height = bounds.height;
|
|
var bg = svg.append("rect")
|
|
.attr("class", "bg")
|
|
.attr("width", width)
|
|
.attr("height", height)
|
|
.style("pointer-events", "all")
|
|
.call(d3.zoom()
|
|
.scaleExtent([0.1, 6])
|
|
.on("zoom", zoomed));
|
|
|
|
function zoomed(){
|
|
g.attr("transform", d3.event.transform);
|
|
|
|
}
|
|
|
|
var g = svg.append('g');
|
|
var join = g.selectAll("g.item")
|
|
.data(data.books, function (d) { return d.id });
|
|
|
|
// process new items (enter)
|
|
join.enter()
|
|
.append("g")
|
|
.attr("class", "item")
|
|
// .text(function(d){return d.title})
|
|
.style("position", "absolute")
|
|
.attr("transform", function (d) { return "translate("+d.scapeX+","+d.scapeY+")"})
|
|
.call(d3.drag()
|
|
.on("start", function(d) {
|
|
svg.selectAll("g.item").sort(function (a, b) { // select the parent and sort the path's
|
|
if (a.id != d.id) return -1; // a is not the hovered element, send "a" to the back
|
|
else return 1; // a is the hovered element, bring "a" to the front
|
|
});
|
|
})
|
|
.on("drag", function(d,i) {
|
|
|
|
d.scapeX += d3.event.dx
|
|
d.scapeY += d3.event.dy
|
|
updateDB(d.id, d.scapeX, d.scapeY);
|
|
d3.select(this).attr("transform", function(d,i){
|
|
return "translate(" + [ d.scapeX,d.scapeY ] + ")"
|
|
})})
|
|
);
|
|
|
|
var itemLink = g.selectAll("g.item")
|
|
.append("a")
|
|
.attr("xlink:href", function(d){return "/books/"+d.id});
|
|
|
|
|
|
/*itemLink.append("rect")
|
|
.attr("class", "no_cover")
|
|
.attr('x', 0)
|
|
.attr('y', 0)
|
|
.attr('height', 60)
|
|
.attr('width', 40);*/
|
|
|
|
|
|
itemLink.append("svg:image")
|
|
.attr("class", "no_cover")
|
|
.attr('x', 0)
|
|
.attr('y', 0)
|
|
.attr('height', 60)
|
|
.attr('width', 40)
|
|
.attr("xlink:href", function(d){if(d.cover!=null) return "/cover/"+d.cover});
|
|
|
|
itemLink.append("text")
|
|
.text(function(d){return d.title})
|
|
.attr("x", 0)
|
|
.attr("y", 80)
|
|
.style("font-size", "6px");
|
|
/* .style("font-size", "10px")
|
|
|
|
.attr("width", 80);*/
|
|
// update existing elements
|
|
join.transition(1000).attr("transform", function (d) { return "translate("+d.scapeX+","+d.scapeY+")"});
|
|
join.exit().remove();
|
|
|
|
|
|
|
|
|
|
|
|
function updateDB(id, xPos, yPos){
|
|
var postForm = { //Fetch form data
|
|
'id' : id,
|
|
'x' : xPos, //Store name fields value,
|
|
'y' : yPos
|
|
};
|
|
|
|
$.ajax({ //Process the form using $.ajax()
|
|
type : 'POST', //Method type
|
|
url : '/scape', //Your form processing file URL
|
|
data : postForm, //Forms name
|
|
dataType : 'json'
|
|
});
|
|
|
|
}
|
|
|
|
})
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|