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>

Related Query

More Query from same tag