Comments (9)
Was any feature request created out of this? I would need this feature too
from plotly.js.
Should be doable with plotly_hover
event handler and an appropriate shape. Here's an example with a click event handler: http://chriddyp.github.io/interactive-heatmaps/ .
In the future, implementation questions should be asked on Stack Overflow (tagged plotly
) or community.plot.ly (tagged plotly-js
). GitHub issues are reserved for bugs reports and feature requests.
from plotly.js.
Thanks for your response. I'll keep in mind that I should write on Stack Overflow or community.plot.ly. From one side I wrote a question but from the other side it is feature request since Plotly doesn't support this out of the box.
from plotly.js.
Correct.
#53 is a feature request, which is totally fine in this repo. 🍻
from plotly.js.
Hi! Hope you guys are well and not too overworked. I wanted to follow up to this question and see if you guys had an example for how this would work or a codepen or feature that I missed while digging through the documentation... Please let us know if you have any direction as this seems to be a common struggle. Thank a lot!
from plotly.js.
I put together some working example using shape
, check this out
from plotly.js.
@fhurta you're the man! Thanks
from plotly.js.
@fhurta 👍
from plotly.js.
const gd = this.refs.headerLine
const d3 = Plotly.d3
gd.on('plotly_hover', (data) => {
const originTooltip = document.querySelector('.hovertext')
const rectH = d3.select(gd).select('.xy').select('rect').attr('height')
const transformAttr = originTooltip.getAttribute('transform')
const translate = /translate\(\s*([^\s,)]+)[ ,]([^\s,)]+)/.exec(transformAttr)
const translateX = parseInt(translate[1])
const translateY = parseInt(translate[2])
const xAxisH = d3.select(gd).select('.xaxislayer')[0][0]
const xAxisTranslateY = /translate\(\s*([^\s,)]+)[ ,]([^\s,)]+)/.exec(xAxisH.getAttribute('transform'))[2]
let toolMarker, sheet
const stylesheets = document.styleSheets
if (document.querySelector('.toolMarker')) {
toolMarker = document.querySelector('.toolMarker')
} else {
toolMarker = document.createElement('div')
document.createElement('div')
toolMarker.style.position = 'absolute'
toolMarker.style.zIndex = '10000'
toolMarker.setAttribute('class', 'toolMarker')
this.refs.headerLine.appendChild(toolMarker)
}
toolMarker.style.left = `${translateX - 3}px`
toolMarker.style.top = `${translateY - 3}px`
if (stylesheets) {
sheet = stylesheets[stylesheets.length - 1]
} else {
const style = document.createElement('style')
document.head.appendChild(style)
}
const cssRulesLength = sheet.cssRules.length
sheet.insertRule(`.toolMarker::after{height:${rectH}px; top:${xAxisTranslateY - translateY}px}`, cssRulesLength)
}).on('plotly_unhover', (data) => {
const sheet = document.styleSheets[document.styleSheets.length - 1]
sheet.deleteRule(sheet.cssRules.length - 1)
document.querySelector('.toolMarker').remove()
})
I passsed this method to achieve
from plotly.js.
Related Issues (20)
- Feature Request: Remove label gap in treemap
- Adding a negative `zorder` to one scatter trace could impact drawing order of other scatter traces and put all of them behind bars!
- Consolidate and add deprecation notice to figure factory
- Unified hover on splom shows duplicate point when setting `hoversubplots: "axis"`
- hoversubplots="axis" with hovermode="x" on stacked traces, shows x-axis label on first trace
- Feature Request: GeoJSON Layer Display
- Handle empty data in heatmaps
- Documentation for heatmap, boxplot, etc
- different spacing between tick labels and axis title with multi line text
- Colorbar Orientation Change Causes Render Issue
- Support `text-shadow` in SVG text
- Support `text-overflow` in SVG text
- Support `user-select` text from the graph elements HOT 2
- Clickmode "event+select" activated and Clicking outside of Graph calls onUpdate incorrectly HOT 1
- how can we set tick for bar
- Need help with multiple axes and subplots
- Hovertemplate use html tag is not working
- [FR] Change the height of the legend graphic (specifically for fill)
- Plotly-basic.js + table HOT 2
- Display tooltips on zero value bars HOT 2
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 plotly.js.