I'm using D3 to display multiple bar charts (30+ charts) similar to the example here: http://phrogz.net/js/d3-playground/#MultiBars_HTML As the user hovers over a bar I want to change the title of just the chart the user is interacting with, with information about the value the user is hovering over.
So if I add something like:
bars.on('mouseover', mouseoverfunc);
function mouseoverfunc(d, i) {
// update the title just for this chart..not all charts
a.select("h2").text(function (d) { return "hello"; });
}
So knowing the mouseover is on the bar [d3.select(this)], how do I select the parent so I can change just the title of one chart? There is a very similar example here: http://mbostock.github.com/protovis/ex/minnesota.html that I'm trying to replicate in D3
Thanks.
The easiest way is probably to assign an attribute to your title divs that let you find them with a select statement, something like:
d3.select("[parentBarChartID="+d.id+"]")
in your mouseoverfunc.
Alternatively, you couldmake your DOM elements hierarchical such that you can traverse using this.parentNode.childNodes, looping over all children until you find the title node (see how to loop over child nodes here.
I believe that the following two examples should show you how to individually select any bar and trigger a callback that selects any specific item...
"Multiple D3 Horizontal Bar Charts Mixed In With HTML Layout Constructs"
"Multiple D3 Vertical Bar Charts Mixed In With HTML Layout Constructs"
You'll notice in the callback functions "synchronizedMouseOver" and "synchronizedMouseOut" that they trigger the change of multiple objects on the SVG canvas... An individual bar, a legend bullet, and a legend text string. You would use the same methodology to change a chart title.
I hope this helps.
Frank
Related
This is my treemap. I have 3 levels and I want to customize the labels like the provided picture.
to be more specific I want:
In the first level I want to have the first level labels out of the main box on the top and the second level should hide here.
After drill down in the second level I want to have the labels again out of the main box.
In all levels, I want to see the last level details in labels as shown in the sample image.
And is there a way to have 3 levels but just drill down into 2 levels?
And do you know why the colors change after drill down? the colors are not the same in the first level and third level!
Thanks a lot for your consideration.
.
As mentioned in comments by #WojciechChmiel the solution for the color difference problem is to set the parent color as transparent!
for having labels outside of the section box I used data label format function. In react the renderToString helped me to pass the react component as a title for levels.
I also could recognize the level of each label by:
const { level } = data.point.node;
with this, I could manage which desirable label to display!
-Running demo provided below!
I have a stacked bar chart as follows:
I want to draw a horizontal line that goes through all the bars of a specific color on hover. Basically, if I hover on the following purple/mauve color, I want the following:
I looked alot in online as well as the documentation, but couldn't find anything.
Any help is really appreciated; thank you!
In theory you should be able to pre-render 5 line charts in addition to your stacked bar chart. Give each line chart a unique id or class html attribute, and each segment of a specific color needs a corresponding html classname, eg 'chartSegmentPurple' (actually it would be better to name the class based upon what the color represents, eg 'chartSegmentEconomicInequality'). Keep each line chart hidden. Give your chart an event listener for hover, then in the event handler get the classname. Use the classname to make visible the corresponding line chart.
Im using this great article to produce a venn diagram with D3.
http://www.benfrederickson.com/venn-diagrams-with-d3.js/
It looks great but on occasion I get bubbles overlapping the the labels become hidden. Is there a way to make sure the text element is always on top? (see the picture below.. label A needs to be on top of circle B.
I found this good article but im struggling in how to implement this in the venn.
How can I bring a circle to the front with d3?
You should grab the latest code from master: this commit should fix the issue you had there https://github.com/benfred/venn.js/commit/4cb3bbef65b5b3c3ce02aee7d913e8814e898baf
Instead of having the 'A' label be overtop of the 'B' circle - it willnow move the label so that its in the certain of the 'A' region that isn't overlapped with 'B'. Some details are in this issue here: https://github.com/benfred/venn.js/issues/18
You might find it easier to work in actual layers. You can use g elements to create them. For example:
var lowerLayer = svg.append('g');
var upperLayer = svg.append('g');
Now anything you append to upperLayer will appear above anything you append to lowerLayer because the two g elements have been added to the DOM and are in a specific order.
Also check out this answer I wrote up for a similar question.
I'm trying to create a data visualization in d3.js that contains two charts: a parallel-axis plot, and horizontal colorbar chart (I just made up that name, but it's basically a series of colored rectangles). Each line in the parallel-axis plot is associated with a set of rectangles in the colorbar chart.
Right now, mousing over a given line highlights that line, and mousing over a given rectangle highlights that set of rectangles. My goal is to also highlight the associated line or set of rectangles on the opposite chart anytime the user mouses over either chart. This seems like it would be pretty straightforward if I generated both charts with the same function. However, it would be much neater (and more reusable) coding style to give each chart its own function and just connect them somehow. I tried having each within-chart mouseover function call a function defined at a higher level that affected both charts, but this didn't seem to have any effect on the chart that wasn't moused-over. Since I still don't feel like I fully understand how d3.js works on an underlying level, I'd really like to have confirmation that this is a viable way to set up my code. My code is long and complicated, and I really just want advice on the structure, so here is the basic outline:
function chart1(){
make chart
function mouseover(d,i){
do stuff
chart1_globalmouseover(d,i);
}
chartElement.on("mouseover", function(d,i){mouseover(d,i)});
}
function chart2(){
make chart
function mouseover(d,i){
do stuff
chart2_globalmouseover(d,i);
}
chartElement.on("mouseover", function(d,i){mouseover(d,i)});
}
function chart1_globalmouseover(d,i){
do stuff in chart 2's mouseover function
}
function chart2_globalmouseover(d,i){
do stuff in chart 1's mouseover function
}
c1 = chart1();
c2 = chart2();
One way to link the two graphs independent of the code used to create them would be to assign IDs or classes to the elements you may want to select. That is, if graph 2 has an element with ID foo, then in a mouse handler for an element of graph 1, you could say d3.select("#foo").style("stroke", "red") for example. Similarly with classes.
This approach allows you to keep the code completely separate. Moreover, if you use classes, you can assign the same class to things you would want to highlight together (e.g. elements representing the same data). Then d3.selectAll(".class") would select and allow you to manipulate all of them. This would work for an arbitrary number of graphs, not just two -- what changes is simply the number of elements that will be selected.
I have the following json and I need to create a grid and also above the grid need to show vertical lines based on the values :
var arr = [];
arr= [
{"Measure":"Air Pollution","Rank":"1","Value":"15.5"},
{"Measure":"Water Pollution","Rank":"2","Value":"13.5"},
{"Measure":"Soil Erosion","Rank":"3","Value":"10.5"}
]
Now I need to create a grid and above the grid, need to create vertical bars based on the "Value". There will be 3 bars created since there are 3 Values. Now when 1st row in the grid is selected, the first vertical bar needs to be highlighted . Similarly, when the 1st vertical bar is selected, the 1st row in the grid to be selected. Creating the grid is not a problem since I am using KendoUI grid but to create the vertical bars and the selection is the one where I am stuck . Any views ?
Thanks.
Based on #Bogdan M.'s suggestion on using div elements, I've set up a jsFiddle demonstrating vertical bars built using jQuery. It relays on the input of values as an array of numbers, and converts those to DOM elements, setting their height accordingly.
This demo can be very easily updated to use the OP's supplied data structure, and selection behavior functionality can be added as well.
This final version (contains the complete solution, both for building the component and for assigning it with selection behavior) can be seen in the full demo on jsFiddle.
All that's left now is to assign handlers for the selection functionality - as cell / row listeners - to the KendoUI grid.
I see that you aim to visualize your data as a bar-chart. If so, don't re-invent the wheel. there are a lot of good JS libraries designated for that purpose.
I've had a good experience using HighCharts, try it out.
Disclaimer: This may be an overkill, but is a suited solution should the component be generic (for future compatibility with flexible data)