Adding an element to top of a group element - d3.js

After joning data with my group I would like the elements in the enter selection to be added to a group (g-element) on top/highest up. Default is to append to the bottom.
The reason for this is that I want the object to visually appear below the all ready visible objects.
I know I can order and sort but I thought there might be an easier/better way to do this. I have done several manual things only to later find out "Oooh, they included a smart way to do that, EASILY."

D3 does have an insert method: https://github.com/mbostock/d3/wiki/Selections#wiki-insert

Excerpt from Reference
For instance, insert("div", ":first-child") will prepend child div
nodes to the current selection.
https://github.com/mbostock/d3/wiki/Selections#wiki-insert

Related

Watir how to click on nested element

I'm trying to click on "Mr" from the drop down list I've tried a combination of things but non of them seem to work.
I've even tried xpath which is usually reliable but for this case its failing.
$browser.element(:xpath, "/html/body/div[1]/div[1]/div[1]/div/div[2]/div[1]/div[2]/div/div[2]/div/div[2]/div[2]/form/div[2]/div/div[2]/div/div/div/div/div/ul/li[2]/a").click
The XPath suggested by Saurabh Gaur, can be written in a more readable Watir-like fashion using:
$browser.ul(class: 'dropdown-menu').link(text: 'Mr').click
Note that this assumes that there is only one ul element with class dropdown-menu. If there are multiple, you will need to scope the search to the specific dropdown using an element that likely exists higher in the DOM.
However, given there is likely only one link with text "Mr", you can probably get away with simply:
$browser.link(text: 'Mr').click
Given the link is a dialog that switches from hidden to visible, you may need to also wait:
$browser.link(text: 'Mr').when_present.click
Your xPath is positional which depends on element position.. it will not work if elements are change their position means adding some elements after some action on the page.
After seeing your attached image I have generated following xPath as below :-
//ul[contains(#class, 'dropdown-menu')]/descendant::span[contains(.,'Mr')]/parent::a
Try with this xPath.. May be it will work...:)

Get any element

I am using DHTMLX, and I have output that goes to a div. The text gets into the div using "attachHTMLString", but after it's in that div, I don't know how to access it.
I'm used to using jQuery where you can assign an ID or class and traverse the DOM and get it. With DHTMLX, it's like jQuery's powers are useless. I just cannot get the data that is right in front of me.
I'm looking for something like:
var divText = dhtmlxElement.getText();
What's the secret to traversing the DHTMLX elements?
I just figured out, the way to do it is to give the element an ID when it's created. Later, you can just call it out by ID.
What apparently does NOT work is to refer to the element on the page by its DHTMLX name and try to "get" it, or capture its text.
But what component are you asking about?
I.e. you can really get the text of tree node by ID...
var text = tree.getItemText("itemId");
And many other components provide this feature

Behat/Mink - trouble finding buttons

My application under test has been developed by external suppliers so I have no control over the HTML structure. The application is extremely Javascript and Ajax heavy, with numerous dynamically generated buttons and auto-complete lists.
In other words, the characteristics of the pages are that they are filled with:
Elements with no fixed IDs (IDs are generated on the fly and have
numbers or other text dynamically added to them)
The same happens with some classes
Most of the times the buttons have no text associated with them since they are either custom coded 'down' arrows for lookup lists
(which aren't lookup lists but hidden divs) or '+' and '-' icons to
maximise or minimise portions of the content. -
It is therefore very difficult to identify these elements, especially the buttons.
I am trying to write a generic 'I click on the button near y' type of step so that it is not necessary to hardcode each and every button (assuming I can even get something to identify them with) into each and every test.
The thinking behind this is that normally there is a label of some sort close to the button at least.
What I want to to is to find the text label, then see if there is a button inside the same scope, and if there is not, move 'back' through the parent elements, and check if there is a button inside the scope of each parent level, up to 5 parents.
There might be all sorts of problems with this approach but I am just curious to see if this will work in general. I have run into some problems.
First I tried to use Xpaths, so I got the Xpath of the parent through :
$parentelement = $element->getParent();
$parentXpath->getXpath();
This would give me an Xpath of : (//html//span[text()='Cost center'])[1] and moving up through the parent elements all the time, they would become successively:
(//html//span[text()='Cost center'])[1]/..[1]
(//html//span[text()='Cost center'])[1]/..[1]/..[1]
and so forth.
The actual button is located in: (//html//span[text()='Cost center'])[1]/..[1]/..[1]//button but it has to go through all the parent elements in order to get there, so it will start with (//html//span[text()='Cost center'])[1]//button and should end with (//html//span[text()='Cost center'])[1]/..[1]/..[1]//button where it should find the button.
Trying to use Xpath I used:
$button_element = $session->getPage()->find('xpath',$parentXpath."//button")
I soon saw that the 'find' command appends an //html to the front of your xpath string so the Xpath that it tried to use ended up being (for each parent Xpath, but using this one as an example):
(//html(//html//span[text()='Cost center'])[1]/..[1])
I then stripped out the brackets as well as the //html, leaving me with:
//span[text()='Cost center'][1]/..[1]
but when I tried:
$button_element = $session->getPage()->find('xpath',$strippedParentXpath."//button")
I got the following error:
SyntaxError: Failed to execute 'evaluate' on 'Document': The string '(//html//span[text()='Cost center'][1]/..[1]//button)[1]' is not a valid XPath expression
However, Firepath can execute this expression and does not show a syntax error for it, although it does not find the actual button (since the button is actually located one level up, where Firepath DOES find it).
So my question 1 is: What is wrong with my Xpath that I can't use it in the find? It actually looks as if //span[text()='Cost center'][1]//button does not throw the same exception, since as I said, I am looping through the parent Xpaths, and it starts with //span[text()='Cost center'][1]//button. It crashes on //span[text()='Cost center'][1]/..[1]//button.
My second option was to get the parent element each time, starting with finding the text on the page, but then to search for a button inside the scope of the parent element using the findbutton functionality.
Looping through the parent elements (up to a maximum of 5):
$parentelement = $parentelement->getParent();
$butonelement = $parentelement->findbutton('xxx');
In other words, find ANY button in the scope of the parent element. The problem I have is how to specify a generic 'button'.
One has to associate SOME text with the button (depicted by the 'xxx' above).
But this is a typical example of buttons in the application:
<button class="autocomplete_button" type="button" id="button_OM_1"> </button>
Where the class is used more than once, and the ID is auto-generated and not the same number all the time. There is no text associated with the button since the class specifies an image.
Question 2: So how can I use 'findbutton' to generically find a 'button' no specific distinguishing characteristics? Please note that I actually did try findbutton("button"), taking the chance that there might be a 'button' somewhere in a button, but this did not work either. At least, it doesn't work consistently and by that I mean that the same test randomly seems to either find or not find the same button when I run the test a couple of times.
After doing some more investigation on this issue I have found the following:
My method of trying to find the closest button to a piece of text via traversing 'up' through the scope of the divs and spans around the text (using xpath) is actually working.
What is NOT working is SAHI, which I am using as the web driver. In other words, it is not a Behat/Mink problem, it is SAHI specific issue.
I tried the same code using Selenium2 and it executes perfectly.
I still require an answer to question 2 - how can I use findbutton() without a specific parameter such as the ID, name or value but I will see if I can find an answer to that question separately and on the Behat user group since I do think that is a Behat/Mink specific issue.
I normaly use css selector and with that, I use to navigate to the class and ID's that the button is inside. it is easier than xpath I think, like you can use
$this->getSession ()->getPage ()->find ( 'css', '.parrent1 .parrent2 .autocomplete_button ' );
I think this will help you as you know which button your gonna use in each scenario

Watin : How to iterate over table rows when there is nothing to identify them

I have tried different solutions to get the table node which I can identify as next sibling to the text node in the existing dom.
I used the following code, but the nextsibling is always null.
var element = browser.Element(Find.ByText(t => t.Contains("Individual Notices")));
if (element != null)
{
var table = element.NextSibling as Table;
}
Would appreciate the help if any one can guide me how to iterate through the rows which are there in the table next to the node "Individual Notices"
Thanks
You're having trouble as the Contains ends up not finding the element you want. Put Console.WriteLine("START" + element.Text+ "END"); in there right after the variable declaration/assignment, and I bet you'll see a whole lot of text output besides "Individual Notices".
If the Dom element you need ONLY has the text "Individual Notices" text, simply remove the lambda call and have Find.ByText("Individual Notices") and then table will have your table.
If this is not an option as the text isn't a known value, you might be able to search on a specific element type (eg: Div) so that parent nodes aren't being returned as the lambda contains result.
Edit:
Sometimes searching for an individual element by text is problematic due to browser oddities. At times text values shown to the user don't necessarily equal the text values seen by the DOM due to whitespaces being added or removed. Basically you might think you have "Individual Notices" but WatiN might see "Individual Notices " <- See the space at the end. The way I run not being able to find a particular element after easy/obvious methods are exhausted is to just iterate through the elements in WatiN code by searching for what I think should find it and then flashing the elements found and/or writing to the console. If not found, widen the search. Repeat as needed.

WP7 Changing 1 layout element based on another

Having no luck here trying to find a solution to this.
I've set up a looping selector based on this guide. (I also used the ListLoopingDataSource class in Part 2 in order to have strings in my looping list).
What I want to be able to do is then change another element (an image box/placeholder) on my layout, based on what is currently selected in the looping selector.
No real idea how to do this, the onSelectionChanged event is kind of abstracted and not really useful? I'm not sure how to programmatically change images either, it doesn't look like I can access a resource from the code base, only from the xaml.
Any help/suggestions would be greatly appreciated.
I found that I could do this by using binding.

Resources