fork/cellxgene
1
0
Fork 0
mirror of https://github.com/chanzuckerberg/cellxgene.git synced 2026-09-23 08:08:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

drawing graph

Browse Source
This commit is contained in:
Colin Megill
2017-09-08 01:08:01 -07:00
parent 0e36aaf830
commit b6be4947eb
6 changed files with 155 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/graph/drawGraph.js
+45 -96
View File
@@ -1,118 +1,67 @@
var margin = {top: 20, right: 10, bottom: 30, left: 40},
import styles from "./graph.css";
import renderQueue from "../continuous/renderQueue";
const margin = {top: 20, right: 10, bottom: 30, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + " " + margin.top + ")");
var factory = d3.geom.quadtree()
.extent([
[0, 0],
[width, height]
]);
var x = d3.scale.linear()
const x = d3.scaleLinear()
.range([0, width]);
var y = d3.scale.linear()
const y = d3.scaleLinear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
/******************************************
*******************************************
Main
*******************************************
******************************************/
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
const drawGraph = (data) => {
var xg = svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")");
var svg = d3.select("#graphAttachPoint").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.attr("class", `${styles.graphSVG}`)
.append("g")
.attr("transform", "translate(" + margin.left + " " + margin.top + ")");
var yg = svg.append("g")
.attr("class", "y axis");
var chartArea = d3.select("#graphAttachPoint").append("div")
.style("left", margin.left + "px")
.style("top", margin.top + "px");
var chartArea = d3.select("body").append("div")
.style("left", margin.left + "px")
.style("top", margin.top + "px");
var canvas = chartArea.append("canvas")
.attr("width", width)
.attr("height", height)
.attr("class", `${styles.graphCanvas}`);
var canvas = chartArea.append("canvas")
.attr("width", width)
.attr("height", height);
var context = canvas.node().getContext("2d");
var context = canvas.node().getContext("2d");
context.fillStyle = "rgba(0,0,0,.5)";
context.fillStyle = "#f0f";
const draw = () => {
// Layer on top of canvas, example of selection details
var highlight = chartArea.append("svg")
.attr("width", width)
.attr("height", height)
.append("circle")
.attr("r", 7)
.classed("hidden", true);
// Update canvas
context.clearRect(0, 0, width, height);
redraw();
data.forEach((p, i) => {
function redraw() {
context.beginPath();
/* context.arc(x,y,r,sAngle,eAngle,counterclockwise); */
context.arc(
x(p[1]), /* x */
y(p[2]), /* y */
2, /* r */
0, /* sAngle */
2 * Math.PI /* eAngle */
);
context.fill();
// Randomize the scale
var scale = 1 + Math.floor(Math.random() * 10);
});
}
// Redraw axes
x.domain([0, scale]);
y.domain([0, scale]);
xg.call(xAxis);
yg.call(yAxis);
var points = randomPoints(scale);
var tree = factory(points);
// Update canvas
context.clearRect(0, 0, width, height);
points.forEach(function(p,i){
context.beginPath();
context.arc(x(p[0]), y(p[1]), 5, 0, 2 * Math.PI);
context.fill();
});
canvas.on("mousemove",function(){
var mouse = d3.mouse(this),
closest = tree.find([x.invert(mouse[0]), y.invert(mouse[1])]);
highlight.attr("cx", x(closest[0]))
.attr("cy", y(closest[1]));
});
canvas.on("mouseover",function(){
highlight.classed("hidden", false);
});
canvas.on("mouseout",function(){
highlight.classed("hidden", true);
});
draw();
}
function randomPoints(scale) {
// Get points
return d3.range(1000).map(function(d){
return [
Math.random() * scale,
Math.random() * scale
];
});
}
export default drawGraph;