merging

[vasturiano]

merging

[morandd]

Ok, I looked into merging but actually there was some significant redesign since the version I started from, so it's a bit tedious to merge. So for my project I will just continue using my fork.

To be more specific, the additions I made were the following attributes:

width: 			{ type: 'number', default: 1 },
height:			{ type: 'number', default: null }, // Auto-set to the same as width, if user does not specify otherwise
depth:			{ type: 'number', default: null },

This lets the user size the graph into AFrame world coordinates (so they could e..g have a small graph that sits on a virtual tabletop, or a huge one to fly inside of.)

nodeMinSize: 	{ type: 'number', default: 0.1 },
nodeMaxSize: 	{ type: 'number', default: 1 },

Alternative to nodeRelSize, so users can specify node size this way instead of adjusting their source data.

nodeColor: { type:'color', default: '#ffffaa' },
nodeOpacity: { type:'number', default: 0.75 },
lineColor: {type: 'color', default:'#f0f0f0'},

moved these to settings instead of hardcoded values

showLabels: { type: 'boolean', default: false },
labelColor: { type:'color', default: '#ffffaa' },
labelScaleFactor: { type:'number', default: 0.5 },

I added hanging text labels underneath each node. For some graphs this may be a better way to explore them than the raycaster-based labels currently available.

lineOpacity: {type: 'number', default: null}, // Default is actually 0.2 (see below where the links are actually drawn) but we set to null here so we can detect if the user has specified a value
varyLineOpacity: {type: 'boolean',default:false},

If true and the source JSON has value fields for the links, the line opacity is linearly scaled using the link value.

To implement the above, I had introduce a "stats" object with a number of d3 scaling functions to translate between intrinsic values of the links and node, and values to use when rendering.

The skeleton of this is like
var stats = calcStats(data)
var stats = {};
stats.scaleX = d3.scaleLinear().domain([stats.minX, stats.maxX]).range([-data.width/2, data.width/2])
return stats;
}

Then use it like:
nodeEl.setAttribute('position', [stats.scaleX(node.x), ... , ...].join(" "));

Finally, I might suggest an option to disable the raycaster labels as well - the camera + controls I happen to use in my scene generates a "THREE.Raycaster: Unsupported camera type" error, and raycasters are computationally expensive so it's good to let the user choose between raycast-based labeling and static hanging labels

My index.js with all this implemented is attached. But given the internal refactoring, I think it's easier to just reimplement these feature fresh rather than try to merge code.

index.js.txt

Ok, long post!

I think the options from here are

• we keep two separate forks
• you are Ok with me doing a bit of invasive surgery on yours to add these features
• you implement some of the above

Thank you for your great work on 3d FDL and for making this component in the first place! It's a great contribution.

[vasturiano]

Hi, thanks for all your info and work on this!

Given that this covers a miscellaneous of different isolated features, I would suggest to register these in separate issues/PR requests so we can break it into smaller pieces, that can be handled independently.

The code indeed went through some changes and various improvements since the first PR iteration. It's now matured enough and the refactor should be done, so feel free to submit any PRs, there shouldn't be any more conflicts this time around. :)

I have a preliminary question for the first feature in your post: how can we enforce a certain bounding box for the graph? The position of the nodes is automatically derived by the graph dynamics and trying to contain this within a frame will possibly lead to conflicting restrictions. Would this be better achieved using scale transforms?