I'm getting used to d3, but seem to be having trouble with more advanced structures. I'm fairly sure there's some subtlety or concept I am not fully appreciating. I want to be able to mirror a changing hierarchical data structure with a changing hierarchical element structure.
My data structure is 3 groups, each with 3 items. Each group and item has a unique key, extracted using a key function in the data() call.
I build the structure, and I can remove a top-level item; .exit().remove() works just fine on that selection. BUT, modifying or removing any sub-item is simply not reflected in the generated element structure.
Full (non-)working jsFiddle here!: http://jsfiddle.net/eu95R/2/, and the all-important enticingly beautiful screenshot:
The problem is that your definition of groups is using svg.enter() and the subselection is made on groups. That is, you're not seeing a change because groups in this case is empty (no enter selection for the SVGs) and therefore there's no subselection.
To fix, simply do the subselection based on e.g. svg (there are a number of ways to fix this -- not saying that this is necessarily the best one). As you are appending the elements to a g within the SVG, the selector would be svg.selectAll("g").selectAll("text.item")....
Complete demo here.
Related
I've been experimenting Compound Graph editor based on Cytoscape.js.
I created a function for adding a compound node for a set of selected nodes with the same parent.
Roughly, it is first tested if the selected nodes have the same parent. If the case, a new node is create, as a child of the parent, and all the selected nodes are moved to this new node.
It seems to work well.
E.g. I created a set of nodes, and grouped them with two levels of decomposition the following way.
A hierarchy of compound nodes created with the created functions
However, when trying to apply the function on a set of nodes at layer 2 as illustrated in the next figure:
Initiating grouping for a set of nodes layer 2
The result is quite surprising, as illustrated in the next figure. The hierarchy of compound nodes is fully changed, while applying exactly the same algorithm than previously.
result of using the function
So I'm wondering if somebody already faced this, and if any idea concerning the reason of this behavior.
In order to debug, I tried to identify the place where the move function is defined in the code (but I didn't succeed yet) in order to put a breakpoint on the call to the move function and to identify which part of the code could cause the unexpected change of parents.
So if someone know where I can find this piece of code, it will also be helpful for understanding where the issue is coming from.
I have some hierarchical data which is being packed to form a bubble chart, this works fine however when I update the data and apply a new pack the wrong elements are updated so they transition to the wrong location within the circle. It seems to be updating the data based on its index but I can’t find any way to tell it which data applies to which existing element. Is there a mechanism to link new data with existing elements, for example an ID or anything?
This is noticeable if my hierarchy is one level and then later split into groups. Some of the existing circles become the parent group circles rather than creating new ones for it. I do have enter/exit functions but it just does a dumb update as there seems to be no way of linking the existing elements to the new data.
I’m sure there must be a way to bind the two together but for the life of me I can’t find it. Thanks!
Mehdi answered this in the comments but adding here for anybody else with the same issue.
I was missing a key in the data binding reference.
Instead of applying the data using .data(data) I needed to add an additional key so that it could be bound properly like .data(data, function(d) { return d.data.id; })
I want to use a slice other than the Filter Box to apply a filter to my dashboard.
For my dataset, which is structured like a tree, I have adapted the indented tree from the d3 visualizations gallery into a slice that looks something like this:
My tree slice has branches and levels which represent different paths, and end nodes which contain my values.
Now, I would like to use this slice to filter my dashboard. Particularly, when the user clicks one of my end nodes, I would like to remove any previous values and to apply the value of that node instead.
I have tried representing the path and value of the node as a string and using it like that in the regular Filter Box. However, there are often cases where I end up with really long strings that make for a poor user experience.
I have looked at the Filter Box implementation to see if I could find the method used to change the filter settings. However, this seems to be quite an involved process and re-implementing the Filter Box in my slice seems to me like the wrong approach.
Is there a generic way to change the dashboard filter and apply it?
The "Table" visualization is currently the only other visualization outside than "Filter Box" that's been set up to (optionally) emit dashboard filter events. Here's how it's implemented:
https://github.com/apache/incubator-superset/blob/master/superset/assets/visualizations/table.js#L130
The interface for the visualization is a function that receives the slice and payload params. The slice object exposes a addFiler and removeFilter as shown in the example above.
So it's a matter or setting up your visualization to emit the proper filtering events by using the slice object.
I'm using angular dragdrop codef0rmer library which gives cool features!
But however when I try to drag elements between two arrays (ng-repeat) I see many empty objects are created.
See this this plnkr code. When you try to move elements around (within and across the green drop area) you can see empty objects are created in both of the arrays. This is problem 1.
But I need way more dynamic (multiple ng-repeat within ng-repeat) like given in this plunkr.
Now the problem gets more complicated when we drap and drop within and around other containers (yellow).
it removes one element from each array.
creates empty objects like above problem.
I have tried all the ways around but no luck! Any helps, suggestions appreciated.
I am working on a graph which basically contains at least 150 nodes using D3 Javascript. The idea can be described as follows:
One node is connected to 100 nodes.
49 nodes of these 100 nodes are connected to other 49 nodes.
Let's clarify it. I know 100 people. 49 people of them have birthdays. Each of which represents a node.
In such a way, I could manage to link them together using source and target through some arrays in Javascript. I think I am missing something very important to understand in Force-Directed Graph in D3. As far as I am aware, the links can be implemented with source and target. My problem is I cant understand how I can link these links to these nodes. I do not know on what basis I can create an array to hold my name, peoples' names and their birthdays so they can be linked together. In my graph, it gives me the right person but the wrong birthday. Could anyone please guide me the right way how to do with this matter. I am following this tutorial: and could not understand how I can create an array to add the information such as: name, peoples names and birthday.
http://bl.ocks.org/mbostock/4062045
Your assistance would be very much appreciated.
The way the nodes and links are linked is by index. That is, if target: 0, it means that the target node of that link is the first one in the list of nodes, as passed to the force layout. You can add any data you need to both links and nodes -- for links, the nodes are also available through link.source and link.target.
Alternatively, you can specify the source and target of a link as the object itself -- this is actually what D3 does internally when you pass the links to the force layout. As it can't work with the indices as such, they are replaced with the resolved node objects (this is why you can access the actual objects through the links).
If you're specifying the graph structure through external data (e.g. JSON), then you should use indices to identify nodes in links. If you're generating the data structure in Javascript, you could use references to the actual objects instead.