You can access this file by the Theme editor which is located in the merchant panel at Configuration > Design > Affiliate panel theme. You have to click the "Edit Theme" button on the currently active theme and then use the search field to look up the above mentioned file.
You will see the code as follows. You can add new lines with the same code, change only the value of "id" parameter to the field id based on the the signup form fields that you can see in the merchant panel at Configuration > Affiliate Signup > Fields (tab).
<div class="Tree"> {widget id="refid" class="TreeUserId} {widget id="name" class="TreeName"} [ {widget id="subAffCount" class="Inline"} ##subaffiliate(s)## ] {widget id="username" class="TreeUserName"} </div>Example: if you want to show City (that is actually data4 in signup form) you can add this line above the </div> tag:
{widget id="data4" class="TreeUserName"}
Or if you want to show photo you can add this line above the </div> tag:
{widget id="photo"}
So the code now looks like this:
<div class="Tree"> {widget id="refid" class="TreeUserId} {widget id="name" class="TreeName"} [ {widget id="subAffCount" class="Inline"} ##subaffiliate(s)## ] {widget id="username" class="TreeUserName"} {widget id="data4" class="TreeUserName"} {widget id="photo"} </div>
If you need to add css style here, you can add class name and set style for this class name in "custom.css" file.