score:0
Accepted answer
you can bind add a mouseover event to display the data point you are hovering over. for example:
svg.append("path")
.data([loessregression_e(data)])
.attr("class", "line_e")
.attr("d", valueline)
.on( 'mouseover', function( d ) {
$( '.tooltip' ).text( "(" + d.x + "," + d.y ")" );
$( '.tooltip' ).show();
})
.on( 'mouseout', function( d ) {
$('.tooltip').hide();
});
this assumes you are using jquery but can be easily modified if not.
edit: sorry, i overlooked a few things. you can't add a div directly to an svg without using a foreign object nor can you append text to a circle. so instead you add the div to the html, and with d3 position the div with the bound data. i've attached a (sloppy) minimum working example you can use as reference where i graph a line and show a label according to the last element. disclaimer: i'm sure there is a much more elegant solution.
<!doctype html>
<html>
<head>
<style>
.tool-tip {
background-color: blue;
height: 50px;
width: 50px;
z-index: 10;
position: absolute;
visibility: hidden;
}
.line {
fill: none;
stroke: steelblue;
stroke-width: 2px;
}
#svg-container {
position: relative;
}
</style>
</head>
<body>
<div id="svg-container" >
<div class='tool-tip'>wtf</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hvvnyaiadrto2pzugmuljr8blusjgizsdygmijlv2b8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.7.1/d3.js"></script>
</body>
<script>
let data = [{'x': 0, 'y': 0}, {'x':1, 'y': 1}, {'x': 2, 'y': 2}, {'x': 3, 'y': 3}]; //made up data
let width = 500;
let height = 500;
let svg = d3.select( "#svg-container" ).append( "svg" ).attr( 'height', height ).attr( 'width', width ).attr( 'id', 'my-svg' )
let xscale = d3.scalelinear()
.domain( [0, 4])
.range( [ 0, width] )
let yscale = d3.scalelinear()
.domain( [0, 4] )
.range( [ height, 0] )
let myline = d3.line()
.x(d => xscale(d.x))
.y(d => yscale(d.y))
svg.append("path")
.data( [data] )
.attr("class", "line")
.attr("d", myline);
let point = svg.selectall( 'circle' )
.data( data )
.enter()
.append( 'circle' )
.attr( 'r', 5 )
.attr( 'cx', function(d) { return xscale( d.x ); })
.attr( 'cy', function(d) { return yscale( d.y ); })
.attr( 'fill', 'red' )
.attr( 'class', 'my-circle' )
//you start here
//grab the last data point that you want to add a label to
let label = svg.select( '.my-circle:last-of-type')
//use fill method as a hook to bind the data to the label
.attr( 'fill', function( d ) {
//get the position to place the label from your data point
let x = parsefloat($( this ).attr( 'cx' ));
let y = parsefloat($( this ).attr( 'cy' ));
//get the raw data point to display
let x_invert = xscale.invert( x );
let y_invert = yscale.invert( y );
//use jquery to set the x and position using offset of 15 - may need to add your
// svg x and y starting points if somewhere offset from the page
$( '.tool-tip' ).text( "(" + d.x + "," + d.y + ")");
$( '.tool-tip' ).css( 'left', (x + 15) + 'px' );
$( '.tool-tip' ).css( 'top', (y + 15) + 'px');
$( '.tool-tip' ).css( 'visibility', 'visible');
//return the fill as we only called this to display the label.
return $( this ).attr( 'fill' );
})
</script>
</html>
Source: stackoverflow.com
Related Query
- How to add a tooltip at the end of the line chart in D3
- How to add tooltip to line chart written in typescript and angular
- How do you add multiple lines to a D3JS line chart where the depedent variable data sources start at different positions along the range?
- How to add tooltip with eclipse in legend in line chart in D3.js
- Is it possible to add zoom and tooltip on the same line chart in d3js?
- D3.js - How can I add a new line to the text in this Collapsible Tree?
- how to add legend to a pie chart using D3js? And how to centralise the pie chart?
- How to add a line on x-axis on a horizontal bar chart in d3
- How to plot animated line chart using d3 while the data table is required to be updated every 1 second?
- How to add a fixed range vertical line to a D3.js chart
- How to change the viewfinder (focus chart) of a NVD3 line chart programmatically?
- d3js line chart -- how to extend last step to end of range?
- How to add text at the end of Arc
- d3.js: How to add value below the label in donut chart
- How to add events to the individual sections(arcs) of a pie chart created out of d3.js?
- How to add background shading to D3 line chart
- How to add circles onto line chart path d3.js
- how to make the x axis scrollable in a d3 line chart graph
- How to add the data in the tooltip after the dataset switching
- How to add the fill in between two line in line graph?
- how to add tooltip bar chart d3.js
- How to make the grids of a chart be in line with axes
- How to add labels for regions in c3.js line chart or detail chart?
- How to add a circle in the middle of donut chart and fill it in d3 js?
- how to add tooltip for donut chart in loop using d3js
- How to add a tooltip that shows a bar chart onto a d3.js map
- How to zoom only on the X axis in a line chart in d3.js (v7)
- How to add image at the end of Arc
- How to add a legend to the motion chart
- How to properly add padding to the plot area in a D3 line chart?
More Query from same tag
- d3.js arc.centroid(d) : Error: Invalid value for <text> attribute transform="translate(NaN,NaN)"
- D3: ordinal scale returning undefined in part of its range
- How to Fit all svg elements into div, to not overflow and hide elements?
- D3 offset X-axis
- Beeswarm plot with force - add links to nodes
- Tree not expanding if I change the children's property name in data
- change the attribute of circles based on multiple selections in d3.js
- How to display and hide links and nodes when clicking on a node in D3 Javascript
- d3 zoom to bounding box II scrolling while zooming throws error
- d3.js gives NAN in transform line
- Map not rendering, but data is correct
- D3.JS theta in force layout
- d3.js Uncaught TypeError: Cannot read property 'length' of undefined
- d3 issues with entering elements after pan
- Install and run node module - step by step (EventDrops)
- global variable not updated when using namespace in javascript d3.js
- D3 update dataset on click and redraw the bar chart
- Draw SVG Ellipse from Equation
- C3 JS - time series tick reverses the format
- Properly show aliased legend items in dc.js (glitchless transitions)
- How to create Bilevel Partition using d3.js?
- Array transformation in D3
- controllerAs in directive's link function not working
- Parse Uploaded CSV file using D3.js
- Why can't I draw a line on this D3.js using angular code?
- d3.js axis add tick value
- Adding marker on d3 tree layout links
- How can I draw pie chart with custom color in d3.js
- d3 Cannot read property 'getPropertyValue' of undefined on mouseover
- How can I make last node in d3 zoomable sunburst as a hyperlink?