score:2
your problem is not so much related to the mouseover event listener, but more to the way you bind data to your path; you don't do a proper data join.
read more about data joins: http://bost.ocks.org/mike/join/
the following example is using divs instead of paths, but the principle is the same. see working example at: http://jsfiddle.net/rghqn/
var data = ['a', 'b', 'c'];
d3.select("body").selectall("div")
.data(data)
.enter().append("div")
.text(string)
.on("mouseover", function(d,i) {
console.log("mouseover!");
// d: bound datum to dom element
console.log("d: ", d);
// i: index of the selection
console.log("i: ", i);
// this context: the current dom element
console.log(d3.select(this).text());
});
see also the api docs section about event listeners: https://github.com/mbostock/d3/wiki/selections#wiki-on
selection.on(type[, listener[, capture]])
adds or removes an event listener to each element in the current selection, for the specified type. the type is a string event type name, such as "click", "mouseover", or "submit". the specified listener is invoked in the same manner as other operator functions, being passed the current datum d and index i, with the this context as the current dom element. to access the current event, use the global d3.event.
edit
i know realize i misunderstood your question. you have one path and want to get information about the path coordinates at the location of the mouse.
there is not straightforward. you can see how mike did it in the following example: http://bl.ocks.org/3902569
score:6
@nautat has the right answer in his edit, but i'd like to expand on it because for whatever reason the blocks examples rarely have comments and can be like unfolding someone else's origami.
this is the relavant part from http://bl.ocks.org/3902569 ... comments along the way are mine
// define a function for mouse move
// this function is wired up to the visualization elsewhere with .on('mousemove', fn)
function mousemove() {
// using the x scale, in this case a d3 time scale
// use the .invert() function to interpolate a date along the scale
// given the x-coordinates of the mouse
var x0 = x.invert(d3.mouse(this)[0]),
// using the interpolated date, find an index in the sorted data
// this would be the index suitable for insertion
i = bisectdate(data, x0, 1),
// now that we know where in the data the interpolated date would "fit"
// between two values, pull them both back as temporaries
d0 = data[i - 1],
d1 = data[i],
// now, examine which of the two dates we are "closer" to
// to do this, compare the delta values
d = x0 - d0.date > d1.date - x0 ? d1 : d0;
// move the "focus" element into position
// we find the x and y values for the new position using the x and y scales
// using the closest data point to the mouse
focus.attr("transform", "translate(" + x(d.date) + "," + y(d.close) + ")");
// set the text of the "focus" element to be the value of the element selected
focus.select("text").text(formatcurrency(d.close));
}
Source: stackoverflow.com
Related Query
- Using Javascript D3 library, how can I determine mouse position in data set of an area element on mousemove event?
- How can I position rotated x-axis labels on column chart using nvd3?
- Using d3.js, how can I display data faster on my chart?
- How to set the Origin (drag.origin) for drag behavior in d3 JavaScript library
- How can I show a graph using d3 force layout with initial positions set and no movement at all?
- How can I set the position of a drop down list with D3.js?
- How to iterate over data in JSON file using D3 javascript
- Using Javascript D3 library, how replace data in selection of rects?
- In a d3 scatterplot using data from a csv file, how do i draw lines connecting related points when the mouse is over a point?
- In d3.js, while importing csv files using a row conversion, how can I "slice" the data to only include a range of rows?
- How can I specify a d3.js selector using values from a data object?
- In D3 I'm assigning a colour to a data category using d3.scale.ordinal(). How can I assign it based on value of x-axis?
- How to determine a SVG shape based off of data using d3.js
- How can I group data to be filtered without losing crossfilter functionality using dc.js?
- How can i set default color on element after mouse out D3
- How can we Sum the data of .csv file columnwise using d3.js
- How can I dynamically generate javascript within a script tag using jade and express
- How can I get the source code from a page using javascript
- How can I draw chart between 2 categories (strings) using recharts library
- How can I parse csv data from a javascript array of strings for use in d3 graphs
- How can i use the data from Hbase to visualize using d3.js
- How can I find the frequency of each member in my data set
- how do I set up a grouping query on the server side. I want set up the query so I can use it for a pie chart in front end, using d3js
- How to convert this data to csv using Nodejs/ JavaScript
- How much data can be visualized by a brower using JSON file?
- How can I set max value(range) for y-axis and bar width of a bar chart using nvd3.js
- How can I add an image as the fill for a circle dynamically in javascript using d3
- How can create a table with using filter on csv data
- how can set customize color to pie chart using D3.js?
- How can we create multi column table using multi array JSON using d3 and crossfilter javascript frameworks
More Query from same tag
- D3.js line chart with CSV multi-level data
- Passing a parameter to an d3.svg.line var
- merge multiple arrays side by side on a given key
- Change the thickness of an axis in billboard.js
- Setting up d3-tip for Angular
- d3 timeout like angular $.timeout
- Add labels to D3 line
- D3 Y Scale, y vs height?
- Backward direction of path with arrow is not showing properly in D3.js V5
- html element is loaded inside my html page but not displayed - hot to fix?
- D3 Group label for xAxis ticks
- Cannot read property 'pack' of undefined
- d3 GeoJSON geoCircle ellipse equivalent
- C3.js SVG visualization to Canvas with canvg - Line charts filled with black rectangles , "ERROR: Element 'parsererror' not yet implemented"
- Make Hierarchical Bar Chart Vertical
- Strange Gridline Behavior
- d3 redraw bar chart with new values
- Modify D3.js Circle Progress Graph to show range of percentages
- D3 append based on header name
- doubts regarding an "official" example of D3 pack layout
- How to create selection from DOM element itself
- using d3.js as an external in webpack
- Moving labels above the rect in d3
- Large dataset crashes my browser
- How can I add columns as categories in a bar chart using Dimple.js?
- d3js v7, the circle moves in the opposite direction in y coordinate when I drag the circle by the cursor
- Trying to get only one tooltip to show on mouseover using d3
- Problem with label position with more than one nvd3 graph on one site
- How to set predefined ordinal values for parallel coordinates in D3.js?
- Is it possible to vary the time interval while the timer is running in d3.js?