Comments (4)
Actually, you can also stop the loop once you've found the correct series that needs to have the tooltip shown. Something like the following should do:
detail.sort(sortFn).forEach( function(d) {
if (domainMouseY > d.value.y0 && domainMouseY < d.value.y0 + d.value.y && !activeItem) {
d.formattedYValue = (this.yFormatter.constructor == Array) ?
this.yFormatter[detail.indexOf(d)](d.value.y) :
this.yFormatter(d.value.y);
d.graphX = graphX;
d.graphY = graph.y(d.value.y0 + d.value.y);
activeItem = d;
return;
}
}, this );
from rickshaw.
oh and then, you can do
if (this.visible && activeItem) {
this.render( {
activeItem: activeItem,
domainX: domainX,
formattedXValue: formattedXValue,
mouseX: eventX,
mouseY: eventY
} );
}
and the render function then doesnt need any loops
render: function(args) {
var activeItem = args.activeItem;
var domainX = args.domainX;
var mouseX = args.mouseX;
var mouseY = args.mouseY;
var formattedXValue = args.formattedXValue;
var xLabel = document.createElement('div');
xLabel.className = 'x_label';
xLabel.innerHTML = formattedXValue;
this.element.appendChild(xLabel);
var item = document.createElement('div');
item.className = 'item';
item.innerHTML = this.formatter(activeItem.series, domainX, activeItem.value.y, formattedXValue, activeItem.formattedYValue, activeItem);
item.style.top = this.graph.y(activeItem.value.y0 + activeItem.value.y) + 'px';
this.element.appendChild(item);
var dot = document.createElement('div');
dot.className = 'dot';
dot.style.top = item.style.top;
dot.style.borderColor = activeItem.series.color;
this.element.appendChild(dot);
item.className = 'item active';
dot.className = 'dot active';
this.show();
if (typeof this.onRender == 'function') {
this.onRender(args);
}
},
from rickshaw.
and my apologies, I'm still not too familiar with github in terms of providing patches.. its kinda complicated when i have quite a few more changes to the file too that are unrelated.. hope this works.
from rickshaw.
All good points.
Things evolved as they did because we started with a bunch of use cases where it was actually useful to show details for all of the series for a given time at once. Then we hid "inactive" tooltips by default, but the consumer can still show them by overriding some CSS.
But I think that's mostly an edge case. We'll pursue going forward with the optimizations you suggested, and maybe just provide an example subclass that shows all the data for a given time at once if that's what to do.
and my apologies, I'm still not too familiar with github in terms of providing patches.. its kinda complicated when i have quite a few more changes to the file too that are unrelated..
Pull requests are pretty awesome: https://help.github.com/articles/using-pull-requests/
from rickshaw.
Related Issues (20)
- Use travis to exclude unwanted files from pull requests
- Can Rickshaw.Series.fill help me fill missing data in series?
- Time format HOT 1
- Using Rickshaw.Fixtures.formatBase1024KMGTP seems to cause Y axis to go weird HOT 4
- Hover Details flickers on left y axis on hover in Firefox HOT 3
- Question regarding minification HOT 2
- Time axis wrong label for ticks before 1900 when showing decades
- ReactJS support for Rickshaw Library HOT 1
- Gettings vis.selectAll is not a function when created from within Vue HOT 5
- Add middle-ticks between year and decade
- how to start this project??? HOT 1
- howt to custom dragZoom ?
- x axis not rendering all specified tick marks
- enhancement: Feature request
- Change label dynamically
- Broken Web Link HOT 1
- For same values of y-axis graph line moves up and down
- Change Y-axis font size
- Rickshaw in React renders a black Canvas when adding X axis HOT 1
- refresh data from JSON with ajax ?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from rickshaw.