brian/d3-spring-model
1
0
Fork 0
Code Issues 3 Releases 4 Activity

แก้ coding style ภาค 9

Browse Source
This commit is contained in:
Pitchaya Boonsarngsuk
2018-03-22 16:40:14 +00:00
parent 294cc7724e
commit 400eab7e80
1 changed files with 88 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
examples/js/example-papaparsing.js
View File

@@ -2,22 +2,22 @@
var width = +document.getElementById('svg').clientWidth,
height = +document.getElementById('svg').clientHeight;
var svg = d3.select("svg")
.call(d3.zoom().scaleExtent([0.0001, 1000000]).on("zoom", function () {
svg.attr("transform", d3.event.transform);
var svg = d3.select('svg')
.call(d3.zoom().scaleExtent([0.0001, 1000000]).on('zoom', function () {
svg.attr('transform', d3.event.transform);
}))
.append("g");
.append('g');
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
var div = d3.select('body').append('div')
.attr('class', 'tooltip')
.style('opacity', 0);
var brush = d3.brush()
.extent([[-9999999, -9999999], [9999999, 9999999]])
.on("end", brushEnded);
.on('end', brushEnded);
svg.append("g")
.attr("class", "brush")
svg.append('g')
.attr('class', 'brush')
.call(brush);
// var intercom = Intercom.getInstance();
@@ -35,10 +35,10 @@ var nodes, // as in Data points
simulation,
velocities = [],
rendering = true, // Rendering during the execution.
forceName = "forces",
forceName = 'forces',
springForce = false,
tooltipWidth = 0,
fileName = "",
fileName = '',
selectedData,
clickedIndex = -1,
paused = false,
@@ -57,7 +57,7 @@ var MULTIPLIER = 50,
ITERATIONS = 300,
FULL_ITERATIONS = 20,
NODE_SIZE = 10,
COLOR_ATTRIBUTE = "",
COLOR_ATTRIBUTE = '',
FULL_NEIGHBOUR_SIZE = 10,
FULL_SAMPLE_SIZE = 10,
INTERP_ENDING_ITS = 20;
@@ -68,7 +68,7 @@ var color = d3.scaleOrdinal(d3.schemeCategory10);
$(document).ready(function () {
distanceFunction = calculateDistance;
d3.select('#startSimulation').on('click', startHybridSimulation);
$("#HLParameters").show();
$('#HLParameters').show();
});
/**
@@ -77,7 +77,7 @@ $(document).ready(function() {
*/
function parseFile (evt) {
// Clear the previous nodes
d3.selectAll(".nodes").remove();
d3.selectAll('.nodes').remove();
springForce = false;
fileName = evt.target.files[0].name;
@@ -112,12 +112,11 @@ function processData(data, error) {
var opts = document.getElementById('color_attr').options;
props.forEach(function (d) {
opts.add(new Option(d, d, (d === COLOR_ATTRIBUTE) ? true : false));
opts.add(new Option(d, d, (d === COLOR_ATTRIBUTE)));
});
opts.selectedIndex = props.length - 1;
// props.pop(); //Hide Iris index / last column from the distance function
// Put the nodes at (0,0)
nodes.forEach(function (d) {
d.x = 0;
@@ -135,49 +134,48 @@ function processData(data, error) {
};
function addNodesToDOM (data) {
node = svg.append("g")
.attr("class", "nodes")
.selectAll("circle")
node = svg.append('g')
.attr('class', 'nodes')
.selectAll('circle')
.data(data)
.enter().append("circle")
.attr("r", NODE_SIZE)
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
.enter().append('circle')
.attr('r', NODE_SIZE)
.attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')')
// Color code the data points by a property (for Poker Hands,
// it is a CLASS property).
.attr("fill", function (d) {
.attr('fill', function (d) {
return color(d[COLOR_ATTRIBUTE]);
})
.on("mouseover", function (d) {
.on('mouseover', function (d) {
div.transition()
.duration(200)
.style("opacity", .9);
.style('opacity', 0.9);
div.html(formatTooltip(d))
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - (15 * props.length)) + "px")
.style("width", (6 * tooltipWidth) + "px")
.style("height", (14 * props.length) + "px");
.style('left', (d3.event.pageX) + 'px')
.style('top', (d3.event.pageY - (15 * props.length)) + 'px')
.style('width', (6 * tooltipWidth) + 'px')
.style('height', (14 * props.length) + 'px');
highlightOnHover(d[COLOR_ATTRIBUTE]);
})
.on("mouseout", function (d) {
.on('mouseout', function (d) {
div.transition()
.duration(500)
.style("opacity", 0);
node.attr("opacity", 1);
.style('opacity', 0);
node.attr('opacity', 1);
})
.on("click", function (d) {
console.log("click", clickedIndex);
.on('click', function (d) {
console.log('click', clickedIndex);
if (clickedIndex !== d.index) {
if (springForce) {
highlightNeighbours(Array.from(simulation.force(forceName).nodeNeighbours(d.index).keys()));
clickedIndex = d.index;
}
} else {
node.attr("r", NODE_SIZE).attr("stroke-width", 0);
node.attr('r', NODE_SIZE).attr('stroke-width', 0);
clickedIndex = -1;
}
});
if (selectedData)
unSelectNodes(selectedData);
if (selectedData) { unSelectNodes(selectedData); }
}
function ticked () {
@@ -185,10 +183,10 @@ function ticked() {
// If rendering is selected, then draw at every iteration.
if (rendering === true) {
node // Each sub-circle in the SVG, update cx and cy
.attr("cx", function (d) {
.attr('cx', function (d) {
return d.x * MULTIPLIER;
})
.attr("cy", function (d) {
.attr('cy', function (d) {
return d.y * MULTIPLIER;
});
}
@@ -206,10 +204,10 @@ function ended() {
simulation.force(forceName, null);
if (rendering !== true) { // Never drawn anything before? Now it's time.
node
.attr("cx", function (d) {
.attr('cx', function (d) {
return d.x * MULTIPLIER;
})
.attr("cy", function (d) {
.attr('cy', function (d) {
return d.y * MULTIPLIER;
});
}
@@ -217,7 +215,7 @@ function ended() {
if (p1 !== 0) {
// Performance time measurement
p2 = performance.now();
console.log("Execution time: " + (p2 - p1));
console.log('Execution time: ' + (p2 - p1));
p1 = 0;
p2 = 0;
}
@@ -228,7 +226,6 @@ function brushEnded() {
results = [];
if (s) {
var x0 = s[0][0] - width / 2,
y0 = s[0][1] - height / 2,
x1 = s[1][0] - width / 2,
@@ -247,22 +244,21 @@ function brushEnded() {
// intercom.emit("select", { name: fileName, indices: results });
d3.select(".brush").call(brush.move, null);
d3.select('.brush').call(brush.move, null);
}
}
/**
* Format the tooltip for the data
* @param {*} node
*/
function formatTooltip (node) {
var textString = "",
temp = "";
var textString = '',
temp = '';
tooltipWidth = 0;
props.forEach(function (element) {
temp = element + ": " + node[element] + "<br/>";
temp = element + ': ' + node[element] + '<br/>';
textString += temp;
if (temp.length > tooltipWidth) {
tooltipWidth = temp.length;
@@ -287,7 +283,7 @@ function stopSimulation() {
* @return {number} the mean of the array.
*/
function getAverage (array) {
console.log("getAverage", array);
console.log('getAverage', array);
var total = 0;
for (var i = 0; i < array.length; i++) {
total += array[i];
@@ -303,7 +299,7 @@ function unSelectNodes(data) {
selectedData = data;
if (fileName === data.name && nodes) {
node
.classed("notSelected", function (d) {
.classed('notSelected', function (d) {
if (data.indices.indexOf(d.index) < 0) {
return true;
}
@@ -312,35 +308,33 @@ function unSelectNodes(data) {
}
}
/**
* Highlight the neighbours for neighbour and sampling algorithm
* @param {*} indices
*/
function highlightNeighbours (indices) {
node
.attr("r", function (d) {
.attr('r', function (d) {
if (indices.indexOf(d.index) >= 0) {
return NODE_SIZE * 2;
}
return NODE_SIZE;
})
.attr("stroke-width", function (d) {
.attr('stroke-width', function (d) {
if (indices.indexOf(d.index) >= 0) {
return NODE_SIZE * 0.2 + "px";
return NODE_SIZE * 0.2 + 'px';
}
return "0px";
return '0px';
})
.attr("stroke", "white");
.attr('stroke', 'white');
}
/**
* Highlight all the nodes with the same class on hover
* @param {*} highlighValue
*/
function highlightOnHover (highlighValue) {
node.attr("opacity", function (d) {
node.attr('opacity', function (d) {
return (highlighValue === d[COLOR_ATTRIBUTE]) ? 1 : 0.3;
});
}
@@ -349,12 +343,11 @@ function highlightOnHover(highlighValue) {
* Color the nodes according to given attribute.
*/
function colorToAttribute () {
node.attr("fill", function (d) {
return color(d[COLOR_ATTRIBUTE])
node.attr('fill', function (d) {
return color(d[COLOR_ATTRIBUTE]);
});
}
/**
* Update the distance range.
@@ -364,7 +357,6 @@ function updateDistanceRange() {
}
}
/**
* Implemented pause/resume functionality
*/
@@ -373,17 +365,16 @@ function pauseUnPause() {
if (paused) {
simulation.force(forceName);
simulation.restart();
d3.select("#pauseButton").text("Pause");
d3.select('#pauseButton').text('Pause');
paused = false;
} else {
simulation.stop();
d3.select("#pauseButton").text("Resume");
d3.select('#pauseButton').text('Resume');
paused = true;
}
}
}
/**
* Average distances for each node.
* @param {*} dataNodes