I'm having a problem updating nodes in my force layout. I have used some help from another stackoverflow post for updating nodes. This worked out fine until I realized that everything(circle svg, lines, text, etc) were under their own "g" tag.
So that means that I cannot manipulate any of the text like I did before. If you compare this with this you can see that in the first fiddle, I can't increase the text size based on the click. d3.select(this).select("text") does not work since the "g" tags do not include a circle and a text together.
So I need to be able to manipulate the text in correspondence to the node. The second fiddle handles that but it has a problem updating the nodes. If you hit the update button, it updates all the nodes but it does not remove existing nodes. For the first fiddle, update works fine but i can't manipulate the text like I mentioned earlier. So for a solution, I need to either find a way to manipulate the text in the first fiddle, or for the second fiddle, I need to somehow have it properly update all the nodes on exit(). I would say the second fiddle would be more natural to work with since the nodes are set out in a structured layout. i.e, each circle and it's corresponding text are in "g" tags just like what you would group in divs.
Related
I'm attempting to work up to a smoothly animated Sankey diagram in this codesandbox but right now I'm having trouble even just abruptly redrawing it. I have attempted to remove nodes, links & gradients via the typical .enter() and .exit() methods, but it seems like the only way to actually get rid of previously drawn rects, paths etc. is to go scorched-earth like so:
If I comment those out and e.g., switch from the 'everybody' view to the 'changed ppl only' view, or use the arrow buttons to navigate between the 2 months worth of data, nothing in my svg seems to change.
As you can maybe see from the sandbox, there aren't any errors--just no updates.
I'm backend developer for several years but a newbie in frontend issues.
I used "graphviz" (using d3.js) to draw an SVG graph from DOT notation.
Everything is working fine but one thing I don't get in my mind:
If I "open" another (or the same one) graph its starting position is the
same as this from the previous drawn graph even if I completely remove
the whole node content from the dom as follows:
var svg = d3.selectAll("svg");
var otherBelow = svg.selectAll("*");
otherBelow.remove();
// svg.remove();
Doing this and checking the page source the nodes below SVG are realy dropped
but drawing the new graph it has exactly the position of the previously
moved graph in "transform" attribute. Doing a work around by resetting the
position bevore solves this problem but then the problem remains for the
"moving on mousedown" capability. Then the graph immediately "jumps" to the old
ones position. But therefor I can't even get an information about somewhere
in the page source. Really the generated page code is 100% the same (with
diff tool) but has a different behaviour. Don't understand how this is possible.
So now my question: Is there a kind of caching? Or is there perhaps the
browser cache used somehow internally? How to fix this?
P.s. if I remove the SVG node itself I get a completely courious behaviour.
Then the newly drawn graph is not movable at all.
This (ugly) workaround does it for me.
// Snipped to render a new graph and reset its position
// #graph -> id of d3-graphviz div-container
document.getElementById('graph').innerHTML = ''
setTimeout(() => {
d3.select("#graph").graphviz()
.dot(yourDotData)
.render()
}, 50)
Explanation/Assumption why this works:
It seems that the deletion of the old graph with .innerHTML = ''and the creation of the new one should not happen in the same rendering phase/at the same time, therefore the timeout function.
The second part of the workaround is to use a new graphivz-instance to render the new graph, therefore the
d3.select(...) within the timeout function.
The graphviz renderer is still present on the element it was created on and has all its data still intact.
Removing the svg and then reuse the renderer is not a valid use case. Nico's answer is probably correct, but there are better ways to do it, but in order to tell you how you should do it instead I would need so see all of your code so I can understand what you really want to do.
Could some one please suggest how to do column-drilldown with D3 JS library,
below example is from Hightchart,
http://www.highcharts.com/demo/column-drilldown
A complete code example for this problem is probably quite extensive, so I'll mostly keep to how you would approach it and assume you know enough of D3 to turn the concept into code.
Lets assume you have the functionality for drawing a general bar chart.
Part of that functionality would priobably be things like
Setting up your svg element and containers
Setting up your scales (one for x and one for y)
Adding axes based on the scales you have created
Adding your bars to the svg container
4.1 Make sure you have your data set available as an array
4.2 Create an enter selection for the available data and append rectelements
4.3 Update attributes like x, y for all your available bar nodes
4.4 Remove any nodes on your exit selection
Voila you have a simple bar chart. Nothing new in that and you can have a look at the code details here -> https://bl.ocks.org/mbostock/3885304
Now in order to do the drill down:
In order to avoid lots of code repetition it probably makes sense to separate the above steps into functions. So for example a setup function that just creates your svg and containers as well as your scales.
Important about the setup function is that you do not need to rerun it on drill through.
Second you will want an update function. This contains steps 3+, which you will need to rerun in order to update your charts on drill through.
One addition here would be adding functionality for updating your scale domain in the beginning (as your data changes on drill through and you want to reflect that in your scales).
Now that you have those two functions all you really need to do is:
Add a click handler to your axis labels or your bars (click on bars might be easier for now). You cans use d3's .on() function for that.
In that event you will want to subset your data by the value of the clicked bar (or get a new data set for the bar value depending on how your data is structured) and then run the update function we created above with the new data.
It could look something like this:
d3.selectAll('.bar-nodes')
.on('click', function(d) {
var updatedData = updateData(d);
updateChart(updatedData);
});
If anything is unclear some more specific questions would be good.
Hope that helps.
I am new to d3 and I am trying to do something like this. Here is what I have done so far JSFiddle, but I don't know how to align the lines to put them like in the picture and also how to put an information box below the chart.
var x=d3.scale.linear().domain([0,r]).range([0,w])
var y=d3.scale.linear().domain([r,0]).range([h,0])
center_group.append('line').attr("x1",x(r/4)).attr("y1",0);
center_group.append('line').attr("x1",x(-r/4)).attr("y1",0);
center_group.append('line').attr("x1",0).attr("y1",x(25));
center_group.append('line').attr("x1",0).attr("y1",x(-r/4));
Thanks!
If I understand correctly, you're trying to align the reticle lines within the circle. I've created a fiddle which should demonstrate a solution to the two issues in your original fiddle.
//circle svg drawn above this point...
center_group.append('line').attr("x1",x(r/6)).attr("y1",0).attr("x2",x(r/5.1));
center_group.append('line').attr("x1",x(-r/6)).attr("y1",0).attr("x2",x(-r/5.1));
center_group.append('line').attr("x1",0).attr("y1",x(19.7)).attr("y2",x(r/6));
center_group.append('line').attr("x1",0).attr("y1",x(-r/6)).attr("y2",x(-r/5.1));
//then include table, as shown here: http://bl.ocks.org/gka/17ee676dc59aa752b4e6
The first issue is that the lines were being drawn before the (white-filled) circle (so any line within the circle was covered). Second issue was that the lines were unbounded, so i added x2 and y2 attributes where needed. See picture link for results.
Regarding the information box, you could simply append a text element under the chart and drop your data in there, but for something more robust, you could include a table, as shown in the example linked in my code above (only two links allowed apparently).
The expected behaviour of the chart is to change and show a different series, when a different option gets selected from the drop down. While changing, it does not animate, even though i have included the "animate" element in the options. Following is my code:
jsfiddle.net/7C53q/
I had this same problem. Finally, I tried re-using the same chart object for the second draw() call, and it worked. It makes sense, when you think about it: how's it supposed to know what the original data was, unless you pass in the chart object drawn with it (or something else containing the original data)?
If you look in the animate example, they create one chart object, then do the draw() in two separate functions, without re-creating the chart object. Please don't ask me why they don't mention this little fact.