Target other elements on d3.js on event - javascript

I have a doughnut chart and I wanted to have an svg circle that serves as a button and scale the doughnut chart down as well as the circle in the middle, how to I target the the other element when I.
nav.on("click", function(d){
nav.transition()
.duration(1000)
.ease("elastic")
.attr("r", 60);
});
Lastly, is there a shorter way to do what I have done so far, here is the fiddle

Well, you simply run the code in the handler that affects the other elements, e.g.
nav.on("click", function(d){
nav.transition()
.duration(1000)
.ease("elastic")
.attr("r", 60);
arc.outerRadius(radius/2);
chart.transition().duration(1000).ease("elastic").attr("d", arc);
});
Jsfiddle here. The code itself looks fine to me.

Related

d3.js dendogram how to add links to leaf nodes and change colors [duplicate]

I am trying to add a link to the text elements of this D3 visualisation:
http://bl.ocks.org/1093025
I would like to be able to click on "flare", "analytics" and navigate to another page or click in the rectangle and perform the normal action, which is expanding the sub-trees.
I tried a few things that didn't work:
on event
I tried to add an on event to the svg:text element:
nodeEnter.append("svg:text")
.attr("dy", 3.5)
.attr("dx", 5.5)
.text(function(d) { return d.name; })
.on("click",function(d,i) { alert("Clicked on the text");});
foreignObject element
I tried to add the foreignObject element like this:
nodeEnter.append("svg:foreignObject")
.style("float","right")
.attr("height", 100)
.attr("width", 100)
.append("div")
.html("<a href='#'>link</a>")
Even though it creates the link, it is an extra link, though (not the text element in the rectangle).
link with xlink:href attribute
Finally, I also tried the following (in some combinations):
<a xlink:href="/svg/index.html">
<text x="10" y="20">/svg/index.html</text>
</a>
But it didn't work either.
Any suggestions?
I agree with Matt's answer re: pointer-events... change this to pointer-events: all in the css.
And this is how I made the link in the force directed graph:
svg = d3.select("body").append("svg");
svg.selectAll(".node")
.append("svg:a").attr("xlink:href", function(d){ return "generic.php?url=" + d.url })
.append("svg:text")
.text(function(d) { return d.name; })
.attr("dy", 3.5)
.attr("dx", 5.5)
.attr("text-anchor", "middle");
//The End ;-)
.on('click', function () {}) should work as long as you
have selected the right nodes
haven't disabled pointer events on text elements with css
The pointer events seems to be catching people out as quite a lot of the examples have pointer-events: none for the text nodes.

Brush functionality in my d3 line chart is not working as expected

My implementation for Brush & Zoom functionality in my d3 line chart is not working as expected,
I followed this link - https://bl.ocks.org/EfratVil/92f894ac0ba265192411e73f633a3e2f,
Problems what I am facing is -
chart is not showing all the values, I have 4 data but it only shows 3 data
onClick of dot I am showing the rect which is not moving with the brush functionality
minor thing but chart always goes out of the box
My code sandbox - https://codesandbox.io/s/proud-firefly-xy1py
Can someone point out what I am doing wrong? thanks.
Please suggest me what I am doing wrong, thanks.
Your first point is going behind your clip area. For example, if you right click on the first visible circle and inspect element you will see all 4 circle elements are present in the dom. The first circle element is behind the axis.
This means you have to move your plot to the right. Unfortunately, the way you have coded the chart you have not appended a g element for the main chart and then appended the circles and path to that g element. As a result this has to be done in multiple places.
First we adjust your clip path as:
svg
.append("defs")
.append("SVG:clipPath")
.attr("id", "clip")
.append("SVG:rect")
.attr("width", containerWidth)
.attr("height", height)
.attr("x", 40)
.attr("y", 0);
next we adjust your circles
scatter
.selectAll(".foo")
.data(data)
.enter()
.append("circle")
.attr("class", "foo")
.attr("transform", "translate(40,0)")
and then your line
scatter
.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line)
.attr("transform", "translate(40,0)");
You will have to account for this 40 px translate for your other elements as well. Although I am having a hard time destructuring your svg. I think this should give you the idea though. Check the axis matches the time points as well.
Check the code sand box
Update
To make the rectangles move with the brush, you will have to add code to your brushed const function to recalculate the x, y, width and height using the updated scales.
Update2
After going through the codesandbox presented in the comments I was able to add the code to update the rectangles to the brushed const as below to make the rects also move with the brushing:
// update rectangles
scatter
.selectAll(".rect-elements")
.attr("x", d => {
console.log(d);
return xScale(d.startTime) - 12.5;
})
.attr("y", 0)
.attr("width", 24)
.attr("height", height + 5);
Full working Code Sandbox.

d3.js difference chart area transitions

I'm having trouble getting the area portions of a difference chart to properly execute transitions.
As I am still learning, the chart is based on Mike Bostock's Difference Chart example and the transitions were guided by d3noob's transitions post.
Relevant bits:
svgchin.select("#clip-above-chin path")
.duration(750)
.attr("d", area.y0(0));
svgchin.select("#clip-below-chin path")
.duration(750)
.attr("d", area.y0(height));
svgchin.select(".area.above")
.duration(750)
.attr("d", area.y0(function(d) { return y(d["Post"]); }));
svgchin.select(".area.below")
.duration(750)
.attr("d", area);
Full jsFiddle here: http://jsfiddle.net/uxb3yq9g/6/
As you can see, the lines and axes update as intended. The areas, however, are not yet on board.
Any ideas?
You haven't actually updated the data bound to the elements. Just do
var svgchin = d3.select("#chinook").datum(data).transition();
and everything works fine. Complete demo here.

flip action in d3 js

I have donut chart, check the jsfiddle. There is text in side donut chart. Right now the text inside donut chart is shows foreground color's percentage. What I want is when I click on text of foreground percentage, I should get midground's percentage with flip transition, something like this flip action in css. I tried on click on this code, but I have no idea how to use
var text = svg.append("text")
.text('0%')
.attr("text-anchor", "middle")
.style("font-size",fontSize+'px')
.attr("dy",fontSize/3)
.attr("dx",2);
How can I do this in d3?
You can achieve this effect with chained transitions that scale in one dimension:
.on("click", function() {
d3.select(this)
.transition().duration(1000)
.attr("transform", "scale(0,1)")
.transition().duration(1000)
.attr("transform", "scale(1,1)")
.text("foo");
});
Complete example here.

Update a Donut Chart Arc Based on a Brush Extent

I'm using a D3 brush to update the arcs of a donut chart, but the update is occurring only after I release the brush. I know that D3 is capable of brush-based continuous updating as Mike has done in this example; what part of that code have I missed in my adaptation?
Here's the function that I currently use to do the updating:
function brushended() {
path.select('.donutPath')
.data(pie([brush.extent()[1],100 - brush.extent()[1]]))
.enter().append("path")
.attr("fill", function(d, i) { return color(i); })
.attr("d", arc);
}
The event you need to listen to is .on("brush",..., like:
var brush = d3.svg.brush()
.x(x)
.extent([0,40])
.on("brush", brushended);
You should change the name of the function to better reflect the situation, but this alone will make it work.
FIDDLE with the listener changes, but also with changes to the way the update selection was being handled.

Categories

Resources