it's possible to get hidden nodes or edges??
i tried to get by making a filter but it doesn't work becaus there is no property hidden in edges dataset.
Thanks.
var HidenEdgesIds = edges.getIds({
filter: function (item) {
return ((item.hidden == true);
}
});
this is a part of my code.
Based on the documentation of DataSets and Edges something like that should work (untested):
var hiddenEdgeIds = edges.getIds({
filter: function (item) {
return item.hidden == true;
}
});
Update
Do you set the hidden property, when you add the edges to your dataset?
Hidden nodes are... hidden. It's something used internally in the Network to render beautifully curved edges.
Why do you need access to the hidden nodes?
UPDATE: if I understand you correctly you have two types of nodes, one of which you can toggle to be displayed or hidden. To achive that, you can simply create your nodes with ids you choose, and to show/hide them update the nodes hidden property. You should not try to use the internally used hidden nodes, but simply create your own group with nodes that you toggle visible/hidden.
Related
I am having items painted using d3 on browser. I want to highlight some of them depending on their property. For example, I have groceries, soaps in which soap elements will have type as [for_bath (OR) for_cloth_wash]. I want to select those elements specific to for_bath in all soaps and groceries combined and painted together on same screen.
How ?
Also, my another doubt is document.getElementById() is not working inside d3's selections code. Am I true or an oversight ?
EDIT
var data = {"soaps":{"lux":"bath", "cinthol":"bath", "rin","cloth_washing"},
"shoes":{"valentine":"teens", "bootie":"kids", "kuuch":"kids"}};
// Now I want to show all bath soaps highlighted, may be with a circle around them.
var svg = d3.select("svg")
.selectAll(".items")
.data(data).enter()
.append("circle")
// highlighting styles
;
Here I want to select bath soaps and round them up.
You haven't given us any code, so I'm going to guess here. What you're probably looking for are CSS attribute selectors. So if you want to select elements which have the attribute soap set to for_bath, you would do
d3.selectAll("[soap=for_bath]");
This is for DOM elements only. If you're talking about data elements, then you can use the .filter() method:
data.filter(function(d) { return d.soap == "for_bath"; });
Regarding your second question, I'm not sure what you mean. The arguments to d3.select() or d3.selectAll() are DOM selectors, so document.getElementById() doesn't make sense here. You can however certainly use it other functions:
d3.selectAll("something").each(function() {
d3.select(this); // the current element
document.getElementById("something"); // another element
});
I have a table with the odd and even rows with a different CSS style tr:nth-child(2n){...}, and when I filter them with a textbox and jQuery, I hide() all the rows except the ones that match my criteria.
The problem is that now the rows remain with the current style (as I assume they keep the position despite they can't be seen), so the new odd and even rows doesnt match the CSS pattern.
How could I fix it?
Try to follow this example:
jQuery('tr:visible').filter(':odd').css({'background-color': 'red'});
jQuery('tr:visible').filter(':even').css({'background-color': 'yellow'});
Check here:
http://jsfiddle.net/KSL7j/1/
Hope it helps
Update
You can check this other example with odd and row CSS classes.
As CAbbott suggested in this fiddle: http://jsfiddle.net/KSL7j/21/
nth-child checks for the nth-child, not for the nth visible child or th nth whatever-styled child (hide() just adds display:none and nothing more...) and will never do.
I see two possible solutions:
1.add classes even/odd after filtering, just asking for the visible ones and then use your css on those classes
untested code:
var rows = $(tr[#display=block]);
rows.each(function(){
var index = rows.index(this);
if(index%2==0){
$(this).addClass('even');
}
else{
$(this).addClass('odd');
}
}
2.really remove the rows, not just hiding them
when you use hide() it is just set the display to none.
the structure of the dom is not modify so the nth-child do not work as you expected
you need to remove the even tr to get the effect you want.
if you want reset the rows. you can hold them in a variable and restore them back
var rows = $("tr");
var even = rows.filter(":even");
$("#trigger").click(function () {
even.hide();
even.remove();
});
http://jsfiddle.net/R2gBt/
I was wanting to have a javascript (jQuery) function that removed everything that didn't have the safe class.
The problem is, if the parent element is hidden, it cannot show the 'safe' part of it.
Is there a simple way to get around this? I'd rather not go in and span all of the elements that need removed.
trimmer = function(element){
x = $(element+' *:not(.safe)');
x.hide();
}
trimmer('section');
Fiddle
var element = 'section';
//finds all non `.safe` elements in `section`s and hides them
$(':not(.safe)', element).hide();
//finds all `.safe` elements in `section`s and shows the `section`s
$('.safe', element).parents(element).show();
Horen was right, it is indeed impossible to show parts of a hidden element.
To make only parts of the text disappear, the non-safe content must be labeled for removal.
$(element).contents().each(function() {
if (this.nodeType == 3)
$(this).wrap('<span class="disappear" />');
});
You can read more about this answer here:
How to add spans to all areas of a node that isn't restricted
I have an enter selection with two elements that I want to prepend to a svg container such that the order of the two elements is maintained. I have tried using insert using the :first-child selector like this
var newlayers = layer.enter();
newlayers.insert("g",":first-child")
As a result of using the :first-child selector the second element in the enter selection ends up being the first element in the svg container after insertion. How can I avoid this behavior?
Ok I was able to reorder the elements using .sort after the insert selection is created in this way:
var newlayers = layer.enter();
newlayers.insert("g",":first-child")
.sort(function(a,b){ return b-a; });
This leaves the ordering of the data intact while only reordering the inserted elements in DOM. I went down the route of reordering the data returned on enter() itself and that opened a whole new bunch of other problems.
I have the following code which swaps out one divs innerHTML for the others on a DND based situation.
dragSrcEl = //This is the var that is assigned to the object that is being dragged, appears outside of this code below.
dragSrcEl.innerHTML = this.innerHTML;
this.innerHTML = e.dataTransfer.getData('text/html');
What would I have to do, if i wanted it to change everything, namely the whole container, all its rels, propertys, classnames, id's, data attributes e.t.c
I cannot re-order it within the dom, due to the dynamic way that each of these will be dragged and dropped about...
Many thanks!
This will do the moving:
$(dargSrcEl).replaceWith(this);