D3鼠标悬停文字定位

Question

I am writing a code for D3 multiline chart. The 2 lines appear properly along with the tooltip for which I am using focus element on mouseover. here is the code:

var margin = {top: 50, right: 140, bottom: 50, left: 80},
width = 1000 - margin.left - margin.right,
height = 600 - margin.top - margin.bottom;

var parseDate = d3.time.format("%Y").parse,
bisectDate = d3.bisector(function(d) { return d.date; }).left,
formatValue = d3.format(",.2f");

var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);

var xAxis = d3.svg.axis().scale(x)
.orient("bottom").ticks(15);

var yAxis = d3.svg.axis().scale(y)
.orient("left").ticks(10);

var voronoi = d3.geom.voronoi()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.value); })
.clipExtent([[-margin.left, -margin.top], [width + margin.right, height + margin.bottom]]);

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

var valueline2 = d3.svg.line()
// .interpolate("basis") 
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.uv); });

var valueline3 = d3.svg.line()
// .interpolate("basis") 
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.tv); });

var svg = d3.select("body")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.attr("class", "graph-svg-component")
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

tmp = null;
// Get the data
var data = [{"uv":"1904","date":"1434391200000","tv":"1000"},{"uv":"5174","date":"1434393900000","tv":"334"},{"uv":"4840","date":"1434394200000","tv":"3432"},{"uv":"11237","date":"1434394500000","tv":"3243"},{"uv":"14456","date":"1434394800000","tv":"1223"},{"uv":"5363","date":"1434397500000","tv":"554"},{"uv":"11641","date":"1434397800000","tv":"3244"},{"uv":"11414","date":"1434398100000","tv":"6767"},{"uv":"13041","date":"1434398400000","tv":"76765"},{"uv":"12111","date":"1434402300000","tv":"5546"},{"uv":"368","date":"1434402600000","tv":"6767"},{"uv":"14476","date":"1434402900000","tv":"5464"},{"uv":"6357","date":"1434403200000","tv":"4323"},{"uv":"1037","date":"1434403500000","tv":"6565"}];

var flatData = [];
data.forEach(function(d) {
    d.date = d.date;
    // d.california_energy_production = +d.california_energy_production;
    d.uv = +d.uv;
    d.tv = +d.tv

    flatData.push({date: d.date, value: d.uv, key: "uv"});
    flatData.push({date: d.date, value: d.tv, key: "tv"});
});

// Scale the range of the data
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return Math.max( d.uv, d.tv); })]);

// Add the valueline path.
// svg.append("path")       
//  .attr("class", "line")
//  .attr("d", valueline1(data));

svg.append("path")      
    .attr("class", "line uv") 
    .style("stroke","blue")
    .attr("d", valueline2(data));
svg.append("path")      
.attr("class", "line tv") 
.style("stroke","yellow")
.attr("d", valueline3(data));



svg.append("g")         // Add the X Axis
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

svg.append("g")         // Add the Y Axis
    .attr("class", "y axis")
    .call(yAxis);

var focus = svg.append("g")
  .attr("class", "focus")
  .attr("transform", "translate(-100,-100)");

focus.append("circle")
  .attr("r", 4.5);

focus.append("text");


svg.append("text")
    // .attr("class", "sources")
    .attr("transform", "translate(" + (width+3) + "," + y(10) + ")")
    .attr("dy", ".35em")
    .attr("text-anchor", "start")
    .style("fill", "#898989");


svg.append("text")
// .attr("class", "sources")
.attr("transform", "translate(" + (width+3) + "," + y(10) + ")")

.attr("text-anchor", "start")
.style("fill", "#898989");




var voronoiGroup = svg.append("g")
  .attr("class", "voronoi");

voronoiGroup.selectAll("path")
  .data(voronoi(flatData))
  .enter().append("path")
  .attr("d", function(d) { return "M" + d.join("L") + "Z"; })
  .datum(function(d) { return d.point; })
  .on("mouseover", mouseover)
  .on("mouseout", mouseout);
function mouseover(d) {
console.log(d);
d3.select("."+d.key).classed("line-hover", true);
focus.attr("transform", "translate(" + x(d.date) + "," + y(d.value) + ")");
focus.style("position: absoloute");
focus.attrb("x","20px");
focus.select("text").text(d.date);
}

function mouseout(d) {
  d3.select("."+d.key).classed("line-hover", false);
  focus.attr("transform", "translate(-100,-100)");
}

In this case the text on mouseover is appearing around the focus element circle. What I want is that the mouseover text should be positioned in an absolute position inside the chart, say, in top left corner of the chart and not near the focus circle. Can this be done with focus element?

Answer 1

I got it to work. Instead of appending the focus text with the info, I am appending the svg text. I added one id attribute to this svg text and on mouse out, I'm removing the svg id.