I have recently created a node map which has multiple nodes with line/arrows going between each node. I have recreated my code here: https://jsfiddle.net/GarrettUK/51j2rx1t/. I was wondering if anyone could show me how I could go about creating an on-click function on the lines so that when a line is clicked... 2 more lines are shown. So when its clicked we would have the line we just clicked in the middle and the 2 new lines either side.
I've already started creating the on-click function as seen in the example. I had a theory that you would create the 2 extra lines that connect to each node but have them hidden. Then when you click on the line. The function switches these lines from hidden to show.
My on-click function looks like this in the example:
.on("click", function(){
// Determine if current line is visible
var active = redLine.active ? false : true ,
newOpacity = active ? 0 : 1;
// Hide or show the elements
d3.select("#redLine").style("opacity", newOpacity);
// Update whether or not the elements are active
redLine.active = active;
});
Related
I'm developing a website when you can select multiple nodes to perform certain operations. I'd like to keep all the nodes I have clicked on "selected" i.e with the border colored. In fact, if I've selected a bunch of nodes and then I click on the pane, their border return to be the default, uncolored ones.
The node above is selected while the lower one isn't.
The problem is that if I try to console.debug(node.selected) after I have selected some nodes and clicked on the pane, the log is true, so the node is selected without any visual feedback.
I tried to manually set node.selected = true on every node inside the array of currently selected node without success:
if (sensitivityModalStatus==="selection"){
setNodes(nodes.map(node => {
if (selectedNodes.includes(parseInt(node.id))){
node.selected = true
}
return node;
));
}
I also tried to set the function onPaneClick to undefined if the status of the program wasn't the selection one.
onPaneClick={sensitivityModalStatus!=="selection" ? onPaneClick : undefined}
Basically I am going with an application style site for mobile view and they wanted a button on the bottom to flip through the pages in order while the nav at the top allows you to flip through them in any order. I want to change the bottom button to link to the following page depending on which one it is on. so I want the button to change links when specific buttons are focused. I tried many different things and can not seem to make it work. Please do your magic.
if(document.getElementById("abt").hasFocus()) {
document.getElementById("golink").href = "#work";
}
I don't believe focus is what you're looking for as focus can be fleeting to track outside of form objects.
I've mocked up a possible solution to help aid you to what you're looking for.
Here is a link to the JSFiddle:
EDIT - Updated Fiddle: https://jsfiddle.net/t0uwff4t/
Javascript in the fiddle:
// Array of sections.
var sections = [
'#first',
'#second',
'#third',
'#fourth',
'#fifth'
]
// Get the last value in the array.
var lastArrayValue = sections[sections.length - 1];
// Button pointer
var btn = document.querySelector('#button');
// On click of the button, do work.
btn.onclick = function() {
// Get the current href.
var href = btn.getAttribute('href');
// Ternary operator setting the index to zero if the user is on the last index of array.
// Else set the index to the next array value.
var index = (href === lastArrayValue) ? 0 : sections.indexOf(href) + 1;
// Set the href attribute.
btn.setAttribute('href', sections[index]);
}
NOTE: While this example works, this is only a mockup - meaning that it doesn't account for rapid button clicking by the user to 'flip pages'.
Good luck and I hope this helps you to your goal.
It's been a while since I picked up d3.js and it seems I'm a bit rusty. I'm trying to do a form where I can add more input fields by clicking + and removing the existing ones by clicking -.
To try and discover what I had wrong, I started colouring the enter(), update and exit() with green, yellow and red respectively.
The original data array has two elements, so they show up as green:
Then I click on the plus sign which pushes a new element to the array, and I expected to see two yellows and one green, but instead I see all the elements deleted besides the last one, and this repeats if I click + again:
And plus again:
I've compared my code with the classic General Update Pattern and I can't see anything significant apart from the way I set the keys, in which I use the e-mail. This is code I've added to fix another underlying issue where not all the boxes were being added, just one out of each 3.
My commented code is as follows:
var renderFriends = function () {
console.log("Rendering friends:" + friendsList)
var friends = d3.select('.friends-container')
.selectAll('div')
.data(friendsList, function(d,i) {
// this was something I added when I thought the problem were the keys
return d
})
// updates will be yellow
friends.classed("update", true)
var enter = friends.enter()
// Friend box
// all the divs are because I'm using foundation css
// the new class is what marks the font green
var friendBox = enter.append('div').classed('large-12 columns new', true)
friendBox.append('div').classed('large-8 columns', true)
.append("input")
.attr("type", "text")
.attr("value", String)
// Icon box
var iconBox = friendBox.append('div').classed('large-2 left columns', true)
.append("i")
.classed('fi-minus', true)
.on("click", function(d) {
// out of scope for this question
console.log("Removing:" + d)
friendsList.remove(friendsList.indexOf(d))
renderFriends()
})
// exit state should colour the fonts red
friends.exit().classed('remove', true)
}
I did a small test with custom styles and this is what got (when I clicked minus button):
All elements have green background since they all have "new" class, the "update" elements have yellow border, and the "remove" red background.
So what I've noticed is that you have a various Divs nested, and the problem is that when you do a selectAll('div') is going to select all divs and d3 is expecting for each div element being selected to be a data element corresponding to it.
So if you want to add another element and your friendsList is:
friendsList = ['a#test.com','b#test.com','c#test.com'];
d3.selectAll('div') is going to take 6 divs (when you had 2 friends and added one), and its going to bind only 3 elements because your dataset contains only 3 friends, and its going to target the rest of elements as "exiting".
To solve this, simply change your select using a class like '.friend' and also add it to each element being inserted (only the main container div);
Like this:
http://jsfiddle.net/2codv59e/
If you want to understand my requirement , first you have to see this demo highcharts demo
. Now click on Tokyo from that demo chart, that tokyo line will be dissappear. Now I want to able to set that property in page load, I mean whenever the page is loaded, the tokyo link should be clicked and only one line should display, when I click on Tokyo then the tokyo line should display. You can find the source code from that demo itself Thank you in advance.
I think what you are after is a way to make only the clicked legend series show. If that is the case you can do it with the plotOptions.series.events.legendItemClick. To have only one series show up initially on the chart (but still show in the legend) you need to set that series' visible property to true and the others to false. If you want to have all series show on initial load that step can be ignored.
To get the toggle working you need to get the index of the legend item you clicked. You then loop through all the series in your chart to find the one that matches that clicked index. When it matches you set series\[i\].show() for the ones that don't you set series.hide().
Here is the basic toggling code:
series: {
events: {
legendItemClick: function (event) {
var seriesIndex = this.index;
var serie = this.chart.series;
console.log(seriesIndex);
for (i = 0; i < serie.length; i++) {
if (serie[i].index == seriesIndex) {
serie[i].show();
console.log(serie[i].index);
} else {
serie[i].hide();
}
}
return false;
}
}
}
And here is a live fiddle.
When creating chart, just set series.visible = false for series which should be hidden by default.
See docs.
recently i'm working on a project to make an interactive directory map for a mall without using flash, because they need to access from mobile devices.
but i have issue with jquery , i'm using custom java commands with jquery map highlight. which i use to target my mapcoords.
Method is invoked when someone clicks either on the map or the list below, it'll highlight the map and it'll show the information on right side.
My problem is when somebody clickd another shop from the list or from the map it won't clear the previous highlighted block and the previous one keeps highlighting, it doesn't matter how many time you click.
what i need is to refine my code such that when somebody clicks the 2nd link it will automatically clear the previous one.
anybody can see my demo file under below link
http://www.pad10.com/testsities/directorymap/
i'll appreciate if somebody help me with this
The problem is you don't turn off the highlight for currently selected area when clicking on another.
Place this:
$('.selected').data('maphilight', {alwaysOn: false}).trigger('alwaysOn.maphilight');
in your salhia.js, in the .mapclick click handler:
$('.mapclick').click(function(){
$('.selected').data('maphilight', {alwaysOn: false}).trigger('alwaysOn.maphilight');
$('.mapclick').removeClass('selected');
$(this).addClass('selected');
var shop = '.shopdetails#' + $(this).attr('shop');
var htmlCode = $(shop).html();
$('.shopinfo').fadeOut(500, function(){
$('.shopinfo .shopdetails').html(htmlCode);
$('.shopinfo').fadeIn(500);
});
});
Changed a bit the code shown on previous answer so it is more generic:
// Init
$('.map').maphilight({
stroke: false,
});
// Reset all map
$('.selected').data('maphilight', {alwaysOn:false}).trigger('alwaysOn.maphilight');
$('area').click(function(){
// Reset all areas with class 'selected'
$('.selected').data('maphilight', {alwaysOn: false}).trigger('alwaysOn.maphilight');
// Remove class selected
$('area').removeClass('selected');
// select and highlight this area
$(this).addClass('selected');
$(this).data('maphilight', {alwaysOn: true}).trigger('alwaysOn.maphilight');
});