score:1
i finally managed to get it working. i post here the code for others trying to do the same thing.
const ref = used3(
(svg) => {
// set the dimensions and margins of the graph
const margin = { top: 10, right: 20, bottom: 30, left: 50 },
width = 1080 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
// append the svg object to the body of the page
svg = d3
.select("#plot-area")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", `translate(${margin.left},${margin.top})`);
// add x axis
const x = d3.scalelog().domain([1, 2000]).range([0, width]);
svg
.append("g")
.attr("transform", `translate(0, ${height})`)
.call(d3.axisbottom(x));
// add y axis
const y = d3.scalelinear().domain([0, 4]).range([height, 0]).nice();
svg.append("g").call(d3.axisleft(y));
// add a scale for bubble size
const z = d3.scalelog().domain([1, 1000]).range([1, 100]);
// -1- create a tooltip div that is hidden by default:
const tooltip = d3
.select("#plot-area")
.append("div")
.style("opacity", 1)
.style("position", "absolute")
.attr("class", "tooltip")
.style("background-color", "black")
.style("border-radius", "5px")
.style("padding", "10px")
.style("color", "white");
// -2- create 3 functions to show / update (when mouse move but stay on same circle) / hide the tooltip
const showtooltip = function (event, d) {
tooltip.transition().duration(200);
tooltip
.style("opacity", 1)
.html("collection: " + d.name + " " + d.tokens + " tokens")
.style("left", event.x / 2 + "px")
.style("top", event.y / 2 + 30 + "px");
};
const movetooltip = function (event, d) {
tooltip
.style("left", event.x / 2 + "px")
.style("top", event.y / 2 + 30 + "px");
};
const hidetooltip = function (event, d) {
tooltip.transition().duration(200).style("opacity", 0);
};
// add dots
svg
.append("g")
.selectall("dot")
.data(input)
.join("circle")
.attr("class", "bubbles")
.attr("cx", (d) => x(d.average_value))
.attr("cy", (d) => y(d.average_price))
.attr("r", (d) => z(d.pieces))
.style("fill", "red")
// -3- trigger the functions
.on("mouseover", function () {
return tooltip.style("visibility", "visible");
})
.on("mousemove", function (event) {
return tooltip
.style("top", event.pagey + "px")
.style("left", event.pagex + "px");
})
.on("mouseout", function () {
return tooltip.style("visibility", "hidden");
});
Source: stackoverflow.com
Related Query
- D3 Bubble chart in Reactjs has empty circles
- Having trouble checking if an array has data or is empty in ReactJS
- Creating a bubble chart using Reactjs and D3
- useSelector not updating when store has changed in Reducer. ReactJS Redux
- propType [name] is not required, but has no corresponding defaultProps declaration ReactJS
- Execute javascript after reactjs render method has completed
- ReactJS typescript error Parameter props implicitly has 'any' type
- ReactJS + Redux: How to wait until dispatch has been completed before moving onto next step?
- Gantt editable chart for ReactJs
- ReactJS defaultProps empty function declaration
- ReactJS - ReactMount: Root element has been removed from its original container. New container
- How to detect when ReactJS has finished page manipulation?
- Failed to register a ServiceWorker: The script has an unsupported MIME type - reactjs
- Embedding bokeh chart in reactjs frontend
- React-Vis - How Do I render an empty chart area?
- How to get ReactJS to render empty HTML attributes
- React Hook useEffect has a missing dependency when passing empty array as second argument
- $_FILES is empty when sending a POST request using axios in ReactJs
- react-click event has empty event.target
- My ReactJS flux App has too many 'actiontype' constants, how can I separate and namespace them?
- How to use react hook in Bubble chart using chart.js
- Create Chart using Reactjs Chartjs and axios
- TypeScript / ReactJS / setTimeout: 'this' implicitly has type 'any' because it does not have a type annotation.ts
- ReactJS - If Object Has Length
- ReactJS : Edit Textbox which has already value in it
- reactjs + webpack + babel 7 Syntax error: The rest element has to be the last element when destructing
- Why is ReactJS rendered HTML filled with empty spans?
- ReactJS how to run an API call when a state has a particular value
- Empty state value for initial call in reactJs
- How to bind function in constructor that has a parameter in Reactjs
More Query from same tag
- Fetching API from react sending me wrong URL
- Given an array of json objects, how do I convert values in each object to an int or float?
- Which is really immutable in redux data or state or both?
- React propTypes add isRquired to an object whose shape is specified
- Call useEffect and re-render every time I call the same API
- React - filter nested array and update the state
- react.js not refreshing state update with date value
- Keeping state of variable mapped from props in functional react component after component redraw
- ×React - TypeError: Cannot read properties of undefined (reading 'userName')
- How to replace a string with another and with a different colour in ReactJS?
- Render HTML from a string that is stored in a React database
- How to import Material-Icons in Hyperstack?
- Accessing a slice of a react-chartjs Pie chart
- How to work with styled components in my react app?
- How to initiate React hook state with foreach loop
- image not getting display in React
- typescript react - strange component import issues
- How to disable one of the list item in PrimeReact ListBox?
- React styled-components - Type 'StyledComponent<"label", any, {}, never>' is not assignable to type 'never'
- Fail catching a promises in react
- How to render "N items selected" rather than the list of N selected items with react-select
- React access const outside of block scope
- Call a function in a sibling component
- After building react app using webpack, browserRouter does not allow me to go directly to a route, but hashRouter does?
- react + styled-components using state to customize style
- × typeerror: cannot destructure property 'yyy' of 'object(...)(...)' as it is undefined
- React Route render different banner image for each route
- Where can I write a conditional statement in a react class?
- Error: Element type is invalid: expected a string in react ,when trying to update state
- Cannot list keys within object