Remove and update Stacked Area chart with d3 - javascript

I have a stacked Area Chart using D3 that renders and displays fine. The chart also has a legend.
The issue is that I need to chart to update when a user clicks/taps on one of the legend entries. And by update I mean remove the entry that was selected and redraw the chart with the remaining values.
I have the interaction working fine (selecting a Legend item triggers the redraw) but I can't get it to remove the no longer existing entry on the chart. If I add path.exit().remove() to the code below it always removes the top most path no matter what entry was selected.
If I update using the second chunk of code it does redraw properly and even removes the correct entry from the chart save for the top most. It never removes that one.
I've tried combining the two as well to no avail. Any help or guidance would be appreciated.
svg.selectAll(".layer")
.data(layers);
path.enter().append("path")
.attr("class", "layer")
.attr("d", function(d) { return area(d.values); })
.style("fill", function(d, i) { return d.color });
Update chart:
svg.selectAll(".layer")
.data(layers)
.attr("d", function(d) { return area(d.values); })
.style("fill", function(d, i) { return d.color || color(d.label); })
.transition() // start a transition to bring the new value into view
.ease("linear")
.duration(500)

Related

How can I continue displaying a tooltip when it hovers over text in a d3 map

I have a D3 Mercator map. In the center of each area, there is text with the name of the area. I also have a tooltip with more information about the area. It is working properly except the tooltip does not display when I hover over the text. How can I define the text to avoid this?
paths.selectAll("text")
.data(wards.features)
.enter().append("svg:text")
.text(function(d){
return (d.properties.SCODE_NAME);
})
.attr("x", function(d){
return path2.centroid(d)[0];
})
.attr("y", function(d){
return path2.centroid(d)[1];
})
.attr("text-anchor","middle")
.attr("font-size","24px");
.attr("pointer-events", "none") solved my problem.

How to make sure labels in a force-directed graph do not get covered up?

I am making a very basic force-directed graph with labels using the d3.js library. Here is part of my code:
var node = d3.select("#canvas").selectAll(".node")
.data(data_nodes)
.enter()
.append("g")
.attr("class","node");
var nodes = node.append("circle")
.style("fill","green")
.style("r",10);
var text = node.append("text")
.attr("dx", 20)
.attr("dy", ".35em")
.style("z-index",1)
.text(function(d){
return d.name;
});
This goes well at the beginning but due to the shifting location of nodes that occurs with the ticking, these text elements that are supposed to serve as labels get covered up by other nodes. I would like to know if there is a way to solve this problem.

Unable to get drop-shadow on the bars

I am working on a bar chart and I need to get the chart to look like this:
Here is what I tried:
.attr("id", "drop-shadow")
.attr("height", "130%");
but it did not work.
jsfiddle
How do I fix this?
Try this fiddle.
Chart looks like that same as the image.
But i didn't do it adding a drop shadow.
Added ellipse before the bar being created and that gives the same effect as above.
svg.selectAll(".ellipse")
.data(data)
.enter()
.append("ellipse")
.attr("cx", function(d) { return x(d.age) + 30; })
.attr("cy", function(d) { return y(0); })
.attr("rx", 35)
.attr("ry", 5)
.style("fill", function(d) { return d.color2; })
This is very simple. You need to create a ellipse before the bar is created.
When we position the ellipse it acts like a drop shadow.
Sorry that i don't have time to get the contrasting colors of the bar. But you can amend it of course.
If you'd like to do it with a drop shadow.
Here's a link that requires a javascript library for the drop shadow of the svg elements.
Hope this helps.

D3 - force layout, circle within circle

In the process of learning D3.js.
Is it possible using a force layout to place a circle within another circle shape as per the picture. I am hoping to transition between a single circle per node to a display showing two circles per node. The size of the effective donut is used to illustrate another variable in the data.
Is this possible?
You don't even need to use anything other than a basic svg circle, as you find in most examples. Just bind the data to it, apply a stroke, and set the stroke-width attr to your other variable. Or r - otherVar, I'm sure you can figure that part out.
If this doesn't satisfy, build your own shape. The 'g' svg element is a container element, and lets you build whatever you like. Add two circles to a g, fill them how you like. Make sure to add them in the right order, since svg has no concept of 'on top', things just get painted in the order that you add them.
edit: okay, quick demo so you can learn some syntax. I didn't add any comments but hopefully the code is very verbose and straightforward. Find it here.
d3/svg is something that you have to just bash your head against for a while. I highly recommend spending some time creating a sandbox environment where you can quickly test new things, save, refresh browser to see results. Minimizing that turnaround time is key.
Thanks to roippi I was able to create a group containing two circle shapes.
var nodeCircles = svg.selectAll("g")
.data(nodes);
// Outer circle
var outer = nodeCircles
.enter()
.append("circle")
.attr("class", "node_circle")
.attr("r", function(d) { return d.radius_plus; })
.style("fill", function(d) { return d.color_plus; })
.style("opacity", 0);
// Inner circle
var inner = nodeCircles
.enter()
.append("circle")
.attr("class", "node_circle")
.attr("r", function(d) { return d.radius; })
.style("fill", function(d) { return d.color; })
.style("stroke", function(d) { return d3.rgb(d.color).darker(2); })
.on("mouseover", mouseOver)
.on("mouseout", mouseOut)
.call(force.drag);
Outer circle visibility is toggled via a button.
As mentioned, I use a desktop based IDE to run/test visualisation languages. Currently the IDE supports studies written in D3.js, Raphael, Processin.js, Paper.js and Dygraphs. Picture below...

Show box on mousehover

I am beginning with d3.js and I would like to know the simplest way to show a box containing text (a tooltip) when my the mouse is over a node of my force-directed graph. Moreover, the text contained in this box must be custom for each node (something like function(d){return d.fullName;}))
Here is a sample code of what I have for now.
var node = vis.selectAll("g.node")
.data(json.nodes)
.enter().append("svg:g")
.attr("class", "node");
node.append("circle")
.attr("r", 12)
.style("fill", "orange");
Thanks in advance
By box, do you mean a tooltip? In Mike's examples, he uses this idiom:
node.append("title")
.text(function(d) { return d.fullName: });
(With other types of elements (divs only?) you can just use element.setAttribute("title", "title");.)

Categories