We Keep Coding

How to check with d3.js if element is in viewpoint (in visible area)

I'm drawing large number of elements and in many situations majority of elements are outside of view point.
I'd like to avoid processing expensive rotation transformations on hidden elements.
Here's an example:
https://blockchaingraph.org/#ipfs-QmfXtMeUdjWBPQHUNKvF3nkYR57aZz7qarW5qikEUYWJvw
Many elements in this graph are hidden (try to zoom out to see). But currently I have to render each element on every tick and it's getting painfully slow.
Here's my code:
function transformLinks(svgLinks, nodeRadius, arrowSize) {
if (svgLinks) {
var link = svgLinks.selectAll('.link').filter(needRedraw);
//console.log("total:", svgLinks.selectAll('.link').size(), ',needRedraw:', link.size());
transformLinksLines(link);
transformLinksTexts(link.selectAll('.text'));
transformLinksOutlines(link, nodeRadius, arrowSize);
transformLinksOverlays(link.selectAll('.overlay'));
link.each(function (n) {
n.source.lx = n.source.x;
n.source.ly = n.source.y;
n.target.lx = n.target.x;
n.target.ly = n.target.y;
});
}
}
function needRedraw(link) {
if (!link.source) {
link = link.parentNode;
}
return nodeMoved(link.source) || nodeMoved(link.target);
}
var minDistToRedraw = 0.8;
function nodeMoved(n) {
return utils.isNumber(n.x) && utils.isNumber(n.y)
&& !(utils.isNumber(n.lx) && Math.abs(n.x - n.lx) <= minDistToRedraw && Math.abs(n.y - n.ly) <= minDistToRedraw);
}
I'd like to extend needRedraw() function to check for visibility. For now the function just checks if either linked node moved significantly enough.

Since I didn't find any out of box solution I had to get into those coordinate conversion stuff.
First, I created function that translates external container coordinates into SVG internal clients coordianate system - containerToSVG()
Then applied it on .getBoundingClientRect(); to get visible area in SVG coordinate space.
Then in the filter checking if both nodes outsize of visible area - do not redraw link.
There are possible situations when both nodes are outsize the area, but link can still cross the area. But it's not a big concern as long as user don't see link detachments.
Here's the code:
function transformLinks(svgLinks, nodeRadius, arrowSize) {
if (svgLinks) {
var containerRect = container.node().getBoundingClientRect();
var p = containerToSVG(-nodeRadius, -nodeRadius);
var r = containerToSVG(containerRect.width + nodeRadius, containerRect.height + nodeRadius);
svgVisibleRect = {left: p.x, top: p.y, right: r.x, bottom: r.y};
minDistToRedraw = (svgVisibleRect.right - svgVisibleRect.left) / (containerRect.width + nodeRadius * 2);
var link = svgLinks.selectAll('.link').filter(needRedraw);
transformLinksLines(link);
transformLinksTexts(link.selectAll('.text'));
transformLinksOutlines(link, nodeRadius, arrowSize);
transformLinksOverlays(link.selectAll('.overlay'));
link.each(function (n) {
updateLastCoord(n.source);
updateLastCoord(n.target);
});
}
}
function needRedraw(link) {
if (!nodeMoved(link.source) && !nodeMoved(link.target)) {
return false;
}
return isVisible(link.source) || isVisible(link.target);
}
function nodeMoved(n) {
return utils.isNumber(n.x) && utils.isNumber(n.y) &&
!(utils.isNumber(n.lx) && Math.abs(n.x - n.lx) <= minDistToRedraw && Math.abs(n.y - n.ly) <= minDistToRedraw);
}
function isVisible(n) {
var result = n.x > svgVisibleRect.left && n.x < svgVisibleRect.right &&
n.y > svgVisibleRect.top && n.y < svgVisibleRect.bottom;
return result;
}
function updateLastCoord(n) {
n.lx = n.x;
n.ly = n.y;
}
function containerToSVG(containerX, containerY) {
var svgPount = svgNode.createSVGPoint();
svgPount.x = containerX;
svgPount.y = containerY;
return svgPount.matrixTransform(document.getElementById("links-svg").getScreenCTM().inverse());
}
function transformLinksLines(link) {
link.attr('transform', function (d) {
var angle = rotation(d.source, d.target);
return 'translate(' + d.source.x + ', ' + d.source.y + ') rotate(' + angle + ')';
});
}

Paging next button jumping by page number * 6

I'm having a problem with my pagination. it seems to take the number of the page I am on and multiplies it by 6 when clicking the "next array" arrow function IE: "clicking on the second page then the next arrow function it jumps to page 13-18 instead of jumping to page 7-12.
next buttons, first array
second array clicking arrow buttons after click on page two jumps to the wrong section
This is the code that creates the pagination.
CreatePages() {
this.pages = [];
console.log({'this.iteration':this.iteration,'this.iteration * 6 - 6':this.iteration * 6 - 6,'this.iteration * 6':this.iteration * 6,'this.allPages':this.allPages})
for (var i = this.iteration * 6 - 6; i < this.iteration * 6 && i < this.allPages; i++) //populate the pages array
{
console.log({'this.iteration':this.iteration,'(this.iteration - 1) * 6':(this.iteration - 1) * 6})
if (i == (this.iteration - 1) ) {
this.pages.push({ id: i + 1, current: true });
}
else
this.pages.push({ id: i + 1, current: false });
}
console.log({pages:this.pages})
}
age(id: number) {
this.pages.forEach(function (p) {
if (p.id != id)
p.current = false;
else
p.current = true;
})
this.iteration =id;
this.postSearch(this.query,this.iteration,this.pagesize,this.categories)
}
PagingPrev() {
this.iteration--;
if (this.iteration <= 0) {
this.iteration = 1;
}
else
this.CreatePages();
this.Page(this.iteration)
}
PagingNext() {
this.iteration++;
if (this.iteration > Math.ceil(this.allPages / 1)) {
this.iteration = Math.ceil(this.allPages / 6);
}
else{
this.CreatePages();
}
console.log({"mattspages":this.iteration})
this.Page(this.iteration)
}

Unable to target ID via Javascript

My mission is to tweak this website https://www.mintpal.com/market/XC/BTC# so it will show a different color for the value if it sees "buy orders" over 2.00000000 BTC.
As an example, you check the image http://i.imgur.com/hZBGiTu.png ( the example worked because i targeted them each one separately with "#buyTotal-0-00126011" and so on.
I only want that td#buyTotal pane to be changed.
I tried to target it with the following:
1 - var cell = $('td') - it works, but it changes the values globally
2 - var cell = $('#buyTotal' + price + value.total) - not working
3 - var cell = $('td#buyTotal') - not working.
The code should look similar to this in the end...
var cell = $('td#buyTotal')
cell.each(function() {
var cell_value = $(this).html();
if ((cell_value >= 0) && (cell_value >=2.00000000)) {
$(this).css({'background' : '#FF0000'});
} else if ((cell_value >= 3) && (cell_value >=5.00000000)) {
$(this).css({'background' : '#FF0000'});
} else if (cell_value >= 8.00000000) {
$(this).css({'background' : '#FF0000'});
}
});
You can also access this as a shortcut ' mintpal.com/assets/js/market.js '
If i omitted something, please let me know. Thanks....
Edit: I'm only playing with the code inspector/console on the website. What i want is extremely simple. It's just that i cannot target the id. I updated the photo also.

This will require regex.
var cells = document.querySelectorAll('*[id^="buyTotal"]');
for(var i = 0; i < cells.length; i++) {
if(cells[i].innerHTML > 2) { cells[i].style.backgroundColor = 'red'; }
}

Jquery slideshow starts with an image on the left of a row but I want it to start at the right end

I'm using this javascript and the slide show slides right to left with the images in this order and positon:
start postion > 1 | 2 | 3 | 4 | 5 | 6 etc etc
but I want to swap them so they run in this position
6 | 5 | 4 | 3 | 2 | 1 < start position
Kind of like reading a book back to front, but keeping it in the right order
I've been told I need to modify the lines labelled below: //MODIFY ME
I hope someone can help! Thank you
Here's my code
(function($) {
$.fn.slideshow = function(method) {
if ( this[0][method] ) {
return this[0][ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof method === 'object' || ! method ) {
return this.each(function() {
var ANIMATION_DURATION = .6; // The duration to flick the content. In seconds.
var MOVE_THRESHOLD = 10; // Since touch points can move slightly when initiating a click this is the
// amount to move before allowing the element to dispatch a click event.
var itemWidth;
var horizontalGap;
var $this = $(this);
var collection;
var viewItems = [];
var touchStartTransformX; // The start transformX when the user taps.
var touchStartX; // The start x coord when the user taps.
var interval; // Interval used for measuring the drag speed.
var wasContentDragged; // Flag for whether or not the content was dragged. Takes into account MOVE_THRESHOLD.
var targetTransformX; // The target transform X when a user flicks the content.
var touchDragCoords = []; // Used to keep track of the touch coordinates when dragging to measure speed.
var touchstartTarget; // The element which triggered the touchstart.
var selectedIndex = 0; // The current visible page.
var viewPortWidth; // The width of the div that holds the horizontal content.
var isAnimating;
var pageChangedLeft;
// The x coord when the items are reset.
var resetX;
var delayTimeout;
init(method);
function init(options) {
collection = options.data;
renderer = options.renderer;
itemWidth = options.itemWidth;
horizontalGap = options.horizontalGap;
initLayout();
$this[0].addEventListener("touchstart", touchstartHandler);
$this[0].addEventListener("mousedown", touchstartHandler);
viewPortWidth = $this.width();
$this.on("webkitTransitionEnd", transitionEndHandler);
collection.on("add", addItem);
}
// MODIFY ME
function initLayout() {
// Layout five items. The one in the middle is always the selected one.
for (var i = 0; i < 5; i++) {
var viewItem;
if (i > 1 && collection.at(i - 2)) // Start at the one in the middle. Subtract 2 so data index starts at 0.
viewItem = new renderer({model: collection.at(i - 2)});
else
viewItem = new renderer();
viewItem.render().$el.appendTo($this);
viewItem.$el.css("left", itemWidth * i + horizontalGap * i);
viewItem.setState(i != 2 ? "off" : "on");
viewItems.push(viewItem);
}
// Center the first viewItem
resetX = itemWidth * 2 - ($this.width() - itemWidth - horizontalGap * 4) / 2;
setTransformX(-resetX);
}
function getCssLeft($el) {
var left = $el.css("left");
return Number(left.split("px")[0]);
}
// MODIFY ME
function transitionEndHandler() {
if (pageChangedLeft != undefined) {
var viewItem;
if (pageChangedLeft) {
// Move the first item to the end.
viewItem = viewItems.shift();
viewItems.push(viewItem);
viewItem.model = collection.at(selectedIndex + 2);
viewItem.$el.css("left", getCssLeft(viewItems[3].$el) + itemWidth + horizontalGap);
} else {
// Move the last item to the beginning.
viewItem = viewItems.pop();
viewItems.splice(0, 0, viewItem);
viewItem.model = collection.at(selectedIndex - 2);
viewItem.$el.css("left", getCssLeft(viewItems[1].$el) - itemWidth - horizontalGap);
}
viewItem.render();
// Reset the layout of the items.
for (var i = 0; i < 5; i++) {
var viewItem = viewItems[i];
viewItem.$el.css("left", itemWidth * i + horizontalGap * i);
viewItem.setState(i != 2 ? "off" : "on");
}
// Reset the transformX so we don't run into any rendering limits. Can't find a definitive answer for what the limits are.
$this.css("-webkit-transition", "none");
setTransformX(-resetX);
pageChangedLeft = undefined;
}
}
function touchstartHandler(e) {
clearInterval(interval);
wasContentDragged = false;
transitionEndHandler();
// Prevent the default so the window doesn't scroll and links don't open immediately.
e.preventDefault();
// Get a reference to the element which triggered the touchstart.
touchstartTarget = e.target;
// Check for device. If not then testing on desktop.
touchStartX = window.Touch ? e.touches[0].clientX : e.clientX;
// Get the current transformX before the transition is removed.
touchStartTransformX = getTransformX();
// Set the transformX before the animation is stopped otherwise the animation will go to the end coord
// instead of stopping at its current location which is where the drag should begin from.
setTransformX(touchStartTransformX);
// Remove the transition so the content doesn't tween to the spot being dragged. This also moves the animation to the end.
$this.css("-webkit-transition", "none");
// Create an interval to monitor how fast the user is dragging.
interval = setInterval(measureDragSpeed, 20);
document.addEventListener("touchmove", touchmoveHandler);
document.addEventListener("touchend", touchendHandler);
document.addEventListener("mousemove", touchmoveHandler);
document.addEventListener("mouseup", touchendHandler);
}
function measureDragSpeed() {
touchDragCoords.push(getTransformX());
}
function touchmoveHandler(e) {
var deltaX = (window.Touch ? e.touches[0].clientX : e.clientX) - touchStartX;
if (wasContentDragged || Math.abs(deltaX) > MOVE_THRESHOLD) { // Keep track of whether or not the user dragged.
wasContentDragged = true;
setTransformX(touchStartTransformX + deltaX);
}
}
function touchendHandler(e) {
document.removeEventListener("touchmove", touchmoveHandler);
document.removeEventListener("touchend", touchendHandler);
document.removeEventListener("mousemove", touchmoveHandler);
document.removeEventListener("mouseup", touchendHandler);
clearInterval(interval);
e.preventDefault();
if (wasContentDragged) { // User dragged more than MOVE_THRESHOLD so transition the content.
var previousX = getTransformX();
var bSwitchPages;
// Compare the last 5 coordinates
for (var i = touchDragCoords.length - 1; i > Math.max(touchDragCoords.length - 5, 0); i--) {
if (touchDragCoords[i] != previousX) {
bSwitchPages = true;
break;
}
}
// User dragged more than halfway across the screen.
if (!bSwitchPages && Math.abs(touchStartTransformX - getTransformX()) > (viewPortWidth / 2))
bSwitchPages = true;
if (bSwitchPages) {
if (previousX > touchStartTransformX) { // User dragged to the right. go to previous page.
if (selectedIndex > 0) { // Make sure user is not on the first page otherwise stay on the same page.
selectedIndex--;
tweenTo(touchStartTransformX + itemWidth + horizontalGap);
pageChangedLeft = false;
} else {
tweenTo(touchStartTransformX);
pageChangedLeft = undefined;
}
} else { // User dragged to the left. go to next page.
if (selectedIndex + 1 < collection.length) {// Make sure user is not on the last page otherwise stay on the same page.
selectedIndex++;
tweenTo(touchStartTransformX - itemWidth - horizontalGap);
pageChangedLeft = true;
} else {
tweenTo(touchStartTransformX);
pageChangedLeft = undefined;
}
}
} else {
tweenTo(touchStartTransformX);
pageChangedLeft = undefined;
}
} else { // User dragged less than MOVE_THRESHOLD trigger a click event.
var event = document.createEvent("MouseEvents");
event.initEvent("click", true, true);
touchstartTarget.dispatchEvent(event);
}
}
// Returns the x of the transform matrix.
function getTransformX() {
var transformArray = $this.css("-webkit-transform").split(","); // matrix(1, 0, 0, 1, 0, 0)
var transformElement = $.trim(transformArray[4]); // remove the leading whitespace.
return transformX = Number(transformElement); // Remove the ).
}
// Sets the x of the transform matrix.
function setTransformX(value) {
$this.css("-webkit-transform", "translateX("+ Math.round(value) + "px)");
}
function tweenTo(value) {
isAnimating = true;
targetTransformX = value;
// Set the style for the transition.
$this.css("-webkit-transition", "-webkit-transform " + ANIMATION_DURATION + "s");
// Need to set the timing function each time -webkit-transition is set.
// The transition is set to ease-out.
$this.css("-webkit-transition-timing-function", "cubic-bezier(0, 0, 0, 1)");
setTransformX(targetTransformX);
}
// MODIFY ME
function addItem(folio) {
clearTimeout(delayTimeout);
// Create a timeout in case multiple items are added in the same frame.
// When the timeout completes all of the view items will have their model
// updated. The renderer should check to make sure the model is different
// before making any changes.
delayTimeout = setTimeout(function(folio) {
var index = collection.models.indexOf(folio);
var dataIndex = index;
var firstIndex = selectedIndex - 2;
var dataIndex = firstIndex;
var viewItem;
for (var i = 0; i < viewItems.length; i++) {
viewItem = viewItems[i];
if (dataIndex >= 0 && dataIndex < collection.length) {
viewItem.model = collection.at(dataIndex);
viewItem.render();
}
viewItem.setState(i != 2 ? "off" : "on");
dataIndex += 1;
}
}, 200);
}
// Called when the data source has changed. Resets the view with the new data source.
this.setData = function(data) {
$this.empty();
viewItems = [];
collection = data;
selectedIndex = 0;
initLayout();
}
});
} else {
$.error( 'Method ' + method + ' does not exist on Slideshow' );
}
}
})(jQuery);

From what I can make out, you need to simply "flip" the loops that create the sides in the slideshow so that it makes the last slide where it was making the first. It seems to do this in two places.
Then, you will need to amend the code which adds a slide to make it add it before the other slides instead of after.
This sounds an awful lot like homework - it's always best to attempt an answer before asking on here. An example on a site like JSFiddle is also generally appreciated.

Flash Player scripting + IE8

I've developed a small control bar for a Flash viewer generated by a third-party software. It has a First, Prev, Next & Last button, and a Zoom command.
While Zoom works fine in all browsers, the navigation buttons seem to fail at Internet Explorer 8.
I use at least two functions. This one locates the Flash object I want to manipulate:
function getFlashMovieObject(movieName)
{
if (window.document[movieName])
{
return window.document[movieName];
}
if (navigator.appName.indexOf("Microsoft Internet")==-1)
{
if (document.embeds && document.embeds[movieName])
return document.embeds[movieName];
}
else // if (navigator.appName.indexOf("Microsoft Internet")!=-1)
{
return document.getElementById(movieName);
}
}
...and any of these ones handles the frame navigation:
var currentFrame = 0;
function gotoFirst(id)
{
getFlashMovieObject(id + "Blueprints").Rewind();
currentFrame = 0;
$("currentFrame").innerHTML = currentFrame + 1;
$("frameTitle").innerHTML = frameTitles[id][currentFrame];
}
function gotoPrev(id)
{
var movie = getFlashMovieObject(id + "Blueprints");
if (currentFrame > 0)
{
currentFrame--;
}
movie.GotoFrame(currentFrame);
$("currentFrame").innerHTML = currentFrame + 1;
$("frameTitle").innerHTML = frameTitles[id][currentFrame];
}
function gotoNext(id)
{
var movie = getFlashMovieObject(id + "Blueprints");
if (currentFrame < movie.TotalFrames() - 1)
{
currentFrame++;
}
movie.GotoFrame(currentFrame);
$("currentFrame").innerHTML = currentFrame + 1;
$("frameTitle").innerHTML = frameTitles[id][currentFrame];
}
function gotoLast(id)
{
var movie = getFlashMovieObject(id + "Blueprints");
currentFrame = movie.TotalFrames() - 1;
movie.GotoFrame(currentFrame);
$("currentFrame").innerHTML = currentFrame + 1;
$("frameTitle").innerHTML = frameTitles[id][currentFrame];
}
Btw, that $ is MooTools, not jQuery.
Anyway, IE dies on the movie.TotalFrames() call. What can I do to solve this? Keep in mind I need this to be done via JavaScript, as I cannot edit the SWF.

You can try replacing this code:
if (currentFrame < movie.TotalFrames() - 1)
with this
if (currentFrame < movie.TGetProperty('/', 5) - 1)
It's not as nice, but is another option. TotalFrames() should work.