There was a little error in your answer.


doesn't work.

The correct answer is



d3.svg.line() is a line generator; it is not the actual line element. This function is designed to work with an area generator, though you can disable the appearance of the shape within by using "fill:none." For more detailed information, here is a link to its documentation:

The code below creates a path element using the d3.svg.line() generator and then adds a tooltip to the path it generates. This title's text attribute shows the y-value of wherever the mouse is. This is done by using the mouse event "mousemove" which seems to be more what you want instead of using "mouseover." (Mouseover requires you to move in and out of the shape to update the text value, whereas mousemove will change the value even if your mouse moves along the line.)

var data = [[{x:100, y:200}, {x:0,y:400}, {x:2, y:300}]];

var line = d3.svg.line()
    .x(function(d) { return d.x; })
    .y(function(d) { return d.y; })

var svg ="body").append("svg:svg")
            .attr("width", 400)
            .attr("height", 400);

var g = svg.selectAll("g").data(data).enter().append("svg:g")
                          .attr("width", 400)
                          .attr("height", 400);

    .attr("d", line)
    .attr("id", "myPath")
    .attr("stroke", "black")
    .attr("stroke-width", 5)
    .attr("fill", "none")    // Remove this part to color the 
                             // shape this path produces
    .on("mousemove", mMove)

function mMove(){

     var m = d3.svg.mouse(this);"#myPath").select("title").text(m[1]);

Related Query

More Query from same tag