I am trying to add tooltip with mouseover hierarchical bars chart, as it is created by Mike Bostock here (https://bl.ocks.org/mbostock/1283663). I can't add tooltip by the traditional way, since the code is a bit different. Can anyone help me?
You could do it like this:
bar.append("text")
.attr("class", "moreText")
.attr("x", function(d) { return x(d.value) + 20; })
.attr("y", barHeight / 2)
.attr("dy", ".35em")
.attr("fill", "none")
.text(function(d) { return d.value; })
in the bar function and add this to have the hover effect
bar.on("mouseover", function() {
d3.select(this).select(".moreText").attr("fill", "#333")
.attr("x", function(d) { return x(d.value) + 15; })
})
.on("mouseout", function() {
d3.select(this).select(".moreText").attr("fill", "none")
})
in the same function, adding the .attr("x", function(d) { return x(d.value) + 15; }) here to make sure we get the right coordinate for the right rectangle both before and after transitions as well and referencing the text by class like this:
d3.select(this).select(".moreText")
Here's a working plunker
Related
I have a grouped bar chart design that has each bar amount immediately above the bar instead of the y axis bar on the far left.
I have added the text like so...
svg.selectAll(".text")
.data(data)
.enter()
.append("text")
.attr("class","label")
.attr("x", function(d) { return x1(d.rate) })
//.attr("y", function(d) { return y(d.value) + 1; })
.attr("dy", ".75em")
.text(function(d) {return d.value; });
But i cant seem to obtain the x and y values according to the bar position and the actual text of the d.value isn't getting inserted.
Sample here:
https://jsfiddle.net/6p7hmef1/7/
That's because the data bound to the texts that you're adding isn't right.
If you add a console.log as follows, you'll be able to see why the labels aren't being inserted. Check for the outputs in console. Console log fiddle
.text(function(d) {console.log(d); return d.value; });
One approach would be to append the texts to the bar groups ("slice" in your case). Just like you do for the bars. Here's a fiddle doing this:
JS Fiddle Demo
slice.selectAll(".text")
.data(function(d) { return d.values; })
.enter()
.append("text")
.attr("class","label");
slice.selectAll('text.label')
.attr("x", function(d) { return x1(d.rate)+ x1.rangeBand()/3 })
.attr("y", function(d) { return y(d.value) + 1; }).attr('dy', '-0.4em')
.text(function(d) {return d.value; });
This might look weird as the texts are shown before the transition of the bars. So changing the value of texts once the bars are shown seems like the right approach to me. (dx and dy attributes can be adjusted as per the requirement)
Here's the final fiddle:
JS FIDDLE
I'm using the "end" callback for every transition and changing the text values accordingly.
.each('end', function () {
d3.select(this.parentNode).selectAll('text.label')
.attr("x", function(d) { return x1(d.rate)+ x1.rangeBand()/3 })
.attr("y", function(d) { return y(d.value) + 1; }).attr('dy', '-0.4em')
.text(function(d) {return d.value; });
})
Hope this helps. :)
Let me know if any part of the code isn't understandable.
I have a multiple bar chart with labels, but it doesn´t look good, because the labels are stacked, I put the code in this jsfiddle
The part of the code that I am using is:
state.selectAll("text.state")
.data(function(d) {
return d.quantities;
})
.enter()
.append("text")
.attr("x", function(d) {
return x1(d.name) + 2;
})
.attr("y", function(d) {
return y(d.value);
})
.style("fill", "#000000")
.attr("font-size", 10)
.attr("font-weight", 700)
.text(function(d) {
return d.value;
});
I tried to put the labels in vertical form, I use .attr('transform', 'rotate(-90)');
But it looks stacked
I hope that you can help me with this
Thanks!
Here's the fiddle: https://jsfiddle.net/yocxuxn9/2/
I just used transform, translate, rotate attribute like you instead of x and y values
state.selectAll("text.state")
.data(function(d) {
return d.quantities;
})
.enter()
.append("text")
.attr("transform", function(d) {
return "translate(" + x1(d.name) + ","+y(d.value)+")rotate(90)";
})
.style("fill", "#000000")
.attr("font-size", 10)
.attr("font-weight", 700)
.text(function(d) {
return d.value;
});
I am making grouped bar chart based on Mike Bostock's tutorial.
I can't figure out how to put circles on top of my bars to act as tooltip when hovering, just like in this tutorial except it's on bars and not on a line.
I tried appending the circles like this :
svg.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("r", 5)
.attr("cx", function(d) { return x1(d.name); })
.attr("cy", function(d) { return y(d.value); })
});
But I get NaN values. I am very confused about which variable I should use to get the right cx and cy.
Here is my code.
Any ideas ?
Thank you
You will get NaN values since your data join is not correct, you are trying to get values that are not currently present in your data. In order to get those values you would need to make a reference to data.years.
Here is my approach:
// Inheriting data from parent node and setting it up,
// add year to each object so we can make use for our
// mouse interactions.
year.selectAll('.gender-circles')
.data(function(data) {
return data.years.map(function(d) {
d.year = data.year;
return d;
})
})
.enter().append('circle')
.attr("class", function(d) {
return "gender-circles gender-circles-" + d.year;
})
.attr("r", 10)
.attr('cx', function(d) {
console.log(d)
return x1(d.name) + 6.5;
})
.attr('cy', function(d) {
return y(d.value) - 15;
})
.style('display', 'none'); // default display
// ....
// Using an invisible rect for mouseover interactions
year.selectAll('.gender-rect-interaction')
.data(function(d) { // Inheriting data from parent node and setting it up
return [d];
})
.enter().append('rect')
.attr("width", x0.rangeBand()) // full width of x0 rangeband
.attr("x", function(d) {
return 0;
})
.attr("y", function(d) {
return 0;
})
.attr("height", function(d) { // full height
return height;
})
.style('opacity', 0) // invisible!
.on('mousemove', function(d) { // show all our circles by class
d3.selectAll('.gender-circles-' + d.year)
.style('display', 'block');
})
.on('mouseout', function(d) { // hide all our circles by class
d3.selectAll('.gender-circles-' + d.year)
.style('display', 'none');
});
Working plnkr: https://plnkr.co/edit/oH4KXdxdIW82nLGv46NI?p=preview
I am a novice at D3 and am trying to modify the Zoomable Partition Layout found here: (http://bl.ocks.org/mbostock/1005873).
I need to add an icon to the top-right of each rectangle, but I am not sure which part of the example code to edit and how?
Does anyone know how I can implement this?
Thanks!
I'm assuming that by icon you mean image. You can do this with the following code.
rect = rect
.data(partition(d3.entries(root)[0]))
.enter();
rect.append("rect")
.attr("x", function(d) { return x(d.x); })
.attr("y", function(d) { return y(d.y); })
.attr("width", function(d) { return x(d.dx); })
.attr("height", function(d) { return y(d.dy); })
.attr("fill", function(d) { return color((d.children ? d : d.parent).key); })
.on("click", clicked);
rect.append("image")
.attr("xlink:href", "foo.jpg")
.attr("x", function(d) { return x(d.x) + x(d.dx) - imageWidth; })
.attr("width", imageWidth)
.attr("y", function(d) { return y(d.y); })
.attr("height", imageHeight);
See here for a demo.
Thanks to someone's help (Brandon), I've been able to add tooltips to the sunburst charts.
I am still looking for a way to display the label of a path on the sunburst chart (and then have the dual mode tooltip + text).
The example that I'd like to improve is provided on jsfiddle.net/trakkasure/UPqX5/
I am looking for the code to add to the following code section:
path = svg.data([getData()]).selectAll("path")
.data(partition.nodes)
.enter().append("svg:path")
.attr("d", arc)
.style("fill", function(d) { return color((d.children ? d : d.parent).name); })
.on("click", magnify)
.on("mouseover", function(d) {
tooltip.show([d3.event.clientX,d3.event.clientY],'<div>'+d.name+'</div> <div>'+d.value+'</div>')
})
.on('mouseout',function(){
tooltip.cleanup()
})
.each(stash);
And I'd like to see the labels as shown on the example is provided on http://bl.ocks.org/910126. I can not get that example to work for me (I'm still new to D3)
I do recognize that there might be too much text on that chart, but in my scenario it is not a problem.
Can someone help me understand how to display all these labels on the chart?
Simply append svg:text elements to the canvas:
path.append("svg:text")
.attr("transform", function(d) { return "rotate(" + (d.x + d.dx / 2 - Math.PI / 2) / Math.PI * 180 + ")"; })
.attr("x", function(d) { return d.y; })
.attr("dx", "6") // margin
.attr("dy", ".35em") // vertical-align
.text(function(d) { return d.name; });
However, in my edit, this will break your magnify function, so i create an svg group to hold together each pair of path and text. In my opinion, elements are better organized this way, easier to query in the future.
Note that you need to modify your magnify function to also animate the text, as for now it only animate the path and leave the text at their original position.
group = svg.data([getData()]).selectAll("path")
.data(partition.nodes)
.enter().append('svg:g');
//path variable is required by magnify function
path = group.append("svg:path")
.attr("d", arc)
.style("fill", function(d) { return color((d.children ? d : d.parent).name); })
.on("click", magnify)
.on("mouseover", function(d) {
tooltip.show([d3.event.clientX,d3.event.clientY],'<div>'+d.name+'</div><div>'+d.value+'</div>')
})
.on('mouseout',function(){
tooltip.cleanup()
})
.each(stash);
// you may need to assign the result to a variable,
// for example to animate the text in your magnify function,
// as shown in the path variable above
group.append("svg:text")
.attr("transform", function(d) { return "rotate(" + (d.x + d.dx / 2 - Math.PI / 2) / Math.PI * 180 + ")"; })
.attr("x", function(d) { return d.y; })
.attr("dx", "6") // margin
.attr("dy", ".35em") // vertical-align
.text(function(d) { return d.name; });
Code was taken from your given example, however
I edited the x attribute into .attr("x", function(d) { return d.y; }) to properly position the text based on your data structure (the example uses Math.sqrt(d.y)). I also modify the text function to return d.name
here is the jsFiddle