Skip to content

Instantly share code, notes, and snippets.

@billdwhite
Created January 26, 2018 17:11
Show Gist options
  • Save billdwhite/61fd05ab3c89e2ee045c81bb0ef8d10d to your computer and use it in GitHub Desktop.
Save billdwhite/61fd05ab3c89e2ee045c81bb0ef8d10d to your computer and use it in GitHub Desktop.
drag rows
license: gpl-3.0
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<style>
.background {
fill: #fff;
}
rect {
stroke: #fff;
stroke-width: 1;
}
text {
text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;
cursor: move;
}
</style>
<title> MATRIX DRAG AND DROP </title>
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 50, right: 30, bottom: 30, left: 50},
width = 800 - margin.left - margin.right,
height = 800 - margin.top - margin.bottom;
var y = d3.scale.ordinal().rangeBands([0, height],0,1),
x = d3.scale.ordinal().rangeBands([0, width],0,1),
c = d3.scale.category20().domain(d3.range(36));
var dragging = {};
var svg = d3.select("body")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.style("margin-left", margin.left + "px")
.append("g")
.attr("id", "matrix")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var matrixA = [],
nodes = [{"name": "A"},
{"name": "B"},
{"name": "C"},
{"name": "D"},
],
n = nodes.length;
nodes.forEach(function(node,i) {
node.index = i;
node.count = 0;
matrixA[i] = d3.range(1).map(function(j) {
return {x: j, y: i, z: 1 + (n * i) + j}; });
});
// Default order
var orders = {
name: d3.range(n).sort(function(a, b) { return d3.ascending(nodes[a].name, nodes[b].name); })
};
// The default sort order.
y.domain(orders.name);
var row = svg.selectAll(".row")
.data(matrixA)
.enter().append("g")
.attr("class", "row")
.attr("transform", function(d, i) {
return "translate(0," + y(i) + ")"; })
//.each(row1);
;
var drag_behavior = d3.behavior.drag();
var trigger;
d3.selectAll(".row").call(d3.behavior.drag()
.origin(function(d) {
return {y: y(d[0].y)};
})
.on("dragstart", function(d) {
trigger = d3.event.sourceEvent.target.className.baseVal;
if (trigger == "label") {
d3.selectAll(".cellrow").attr("opacity", 1);
dragging[d[0].y] = y(d[0].y);
// Move the row that is moving on the front
sel = d3.select(this);
//sel.moveToFront();
}
})
.on("drag", function(d) {
// Hide what is in the back
if (trigger == "label") {
d3.selectAll(".cellcolumn").attr("opacity", 0);
dragging[d[0].y] = Math.min(height, Math.max(0, d3.event.y));
orders.name.sort(function(a, b) { return position(a) - position(b); });
y.domain(orders.name);
d3.selectAll(".row").attr("transform", function(d, i) {
return "translate(0," + position(d[0].y) + ")";
});
}
})
.on("dragend", function(d) {
if (trigger == "label") {
delete dragging[d[0].y];
transition(d3.select(this)).attr("transform", "translate(0," + y(d[0].y) + ")");
d3.selectAll(".column").each(function(d) {
d3.select(this).selectAll(".cellcolumn").attr("x", function(d) {
return -y(d.y)-90; });
});
}
})
);
row.append("text")
.attr("class", "label")
.attr("x", 140)
.attr("y", y.rangeBand() /10)
.attr("dy", ".32em")
.attr("text-anchor", "end")
.text(function(d, i) { return nodes[i].name; });
row.append("circle")
.attr("class", "cellrow")
.attr("cx",10)
.attr("r",20)
function row1(row) {
//var cell = d3.select(this).selectAll(".cellrow")
//.data(row.filter(function(d) {
// return d.z;
//}))
//.enter().append("rect")
//.attr("class", "cellrow")
//.attr("x", function(d) {
// return y(d.x);
//})
//.attr("width", 500)
//.attr("height", y.rangeBand())
//.style("fill", function(d) {
// return c(d.z);
//})
;
}
d3.selection.prototype.moveToFront = function() {
return this.each(function(){
this.parentNode.appendChild(this);
});
};
function position(d) {
var v = dragging[d];
return v == null ? y(d) : v;
}
//function cPosition(d) {
//var v = dragging[d];
//return v == null ? x(d) : v;
//}
function transition(g) {
return g.transition().duration(500);
}
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment