New to D3 here. I am attempting to combine brush and zoom(ex1) with multiple brushes(ex2).
The idea is that the user will be able to create multiple brushes on top of Ex1's focus chart to make annotations on the data. Which I am able to do. However, I am only able to update one(the first) annotation brush position on the chart after zooming using this on ex2's zoomed function:
.select("#brush-0").call(brushes[0].brush.move, lastSelection.map(t.applyX, t));
Where t is the zoom transform and lastSelection is the selection from the last brush that was created. Very hacky, I know, but at least behaves as expected.
I would like to be able to update all the brushes that are stored in the brushes array after zooming and panning in a way that can be called from the zoomed function. Help!
EDIT:
I have recreated the issue with my (flawed) solution attempt here: jsfiddle.net/0pk8wce9/1
Related
We need to make it move like here.example The code is complex there, I can't figure it out.
I wrote the code my code, but I don’t understand how to make the tooltip move horizontally not behind the mouse, but near the nearest horizontal mark (as in the example)
It is not yet clear where the text above the bold text in the tooltip comes from. How to remove it so that it looks like in the picture?
How do I make the title of the tooltip match the label on the X-axis?
There are many ways to accomplish this. The way I typically do this is to create a series of SVG elements -- such as circles or rects -- using the same scale and data as the paths.
You can make these objects visible or invisible. Either way, you can attach mouseenter, mouseleave events to each to render and populate the tooltip.
I'm trying to create a scattered chart with Angular-Kendo,
and have some challenges with zooming.
The current challenge is that upon zoom in by area selection with the mouse.
It does the zoom perfectly, besides the fact that it ruins the axis numbers.
I created an example [not angular oriented, but very clear].
Simple example - you can try to zoom with mouse drag.
Already tried the [labels]= "{format: '{0: n3}'}", etc... but it didn't work...
Thanks for any help.
The solution I found for this very painful item is:
using kendo-chart-x-axis instead of category-axis :-)
I am building a version of this parallel coordinate view in d3.js v4.
https://bl.ocks.org/syntagmatic/05a5b0897a48890133beb59c815bd953
In my example I have a predefined selection (in the form of a [min,max] array that I would like to set programatically as a brush in one or more of the axes, after the plot has loaded. But I cannot seem to find a way to do it. Most examples I found on setting a brush from code are using d3 v3 and use setting extent but that does not work anymore in v4 it seems.
can someone give me some tips and a simple example hot to do this in this case (so with multiple axes and brushes active) ?
thanks
Select your brush group and call brush.move, then also pass an array with the start and end coordinates. Your brush move event will then take care of the rest.
d3.select(".brush").call(brush.move, [[startX, endX], [startY, endY]]);
I have a number of graphs, for simplicity take this example on jsfiddle, where there is a brush-on graph, a bar chart keyed on time and a row chart keyed on some categories. In addition, I use the d3-tip library for the tooltips (in the link above a very simplified version of my tip).
In order to avoid the creation of a bar-row in a rowChart, I used the fake-group as outlined in the FAQ of dc-js (and here as well).
The fake group works well, not displaying the C category on the row chart.
However, if I brush on some months with 0 data, when I reset the filter (just click anywhere but the filtered region on the brushon chart), the d3-tip on the row chart disappears.
Notice the if the group is created without the fake-grouping-function, this problem does not arise.
Any explanation why this happens?
How to avoid this (without loosing the remove_empty_bins)?
Although you can use dc.js and d3.js interchangeably, and dc.js is intentionally a "leaky abstraction", some things will go better if you do them the idiomatic dc.js way.
I have two suggestions:
Apply your tooltips in response to dc.js events so that they will get reapplied when new graphical objects are created (or re-created).
Use chart.selectAll instead of d3.selectAll when modifying the charts.
Okay, #2 actually has no bearing on this question, but it does help scope the selects better so that it's harder for them to miss the chart or accidentally modify stuff elsewhere in the page.
Implementing #1 looks something like this:
month_chart.on('pretransition', function(chart) {
chart.selectAll('rect.bar').call(month_tip)
.on('mouseover', month_tip.show).on('mouseout', month_tip.hide);
});
loc_chart1.on('pretransition', function(chart) {
chart.selectAll('g.row').call(loc_tip)
.on('mouseover', loc_tip.show).on('mouseout', loc_tip.hide);
});
The pretransition event fires right after a render or redraw, so it's usually the best moment to manipulate dc's elements. Much better than just running the code globally. I like to set everything up, then call dc.renderAll(), then allow the renders and redraws to take care of themselves later on.
In particular, when those bars get added back in when remove_empty_bins stops removing them, these events will pick them up and re-tip them.
Fork of your fiddle: https://jsfiddle.net/gordonwoodhull/5feL3gko/4/
I am using Flot to plot images for our project. For pre-defined shapes like line, pie, I can add tooltip through flot.tooltip.
However, we have some images that are drawn through Html5 canvas API, such as Here. I would like to add a tooltip for the red rectangle and another tooltip for the blank area. Any library to make it work?
With canvas there isn't a good way to detect when the mouse hovers over a particular drawn item; it's just a buffer, with no idea of what operations were used to draw into it. Flot's own hover detection has no concept of what was drawn on the canvas; it just knows that, e.g. the pie starts at a particular point and extend outwards a certain number of pixels.
So no matter what, you will have to write a function that accepts a mouse event, examines whatever data you used to draw the image, and decides what that corresponds to.
Where Flot could help is in providing a way to override the built-in hover function with your own; then the tooltip plugin would simply work with your function. Since you can't currently do that, you have a choice of a) modifying the tooltip plugin to use your function, or b) registering your own mousemove listener on the overlay element, which then generates 'fake' plothover events for the tooltip plugin to consume.