[英]D3 mouseover text positioning
我正在为D3多折线图编写代码。 2行以及我在鼠标悬停时使用focus元素的工具提示正确显示。 这是代码:
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)");
}
在这种情况下,鼠标悬停时的文本会出现在焦点元素圆周围。 我想要的是将鼠标悬停在文本内的绝对位置,例如,图表的左上角,而不是在焦点圈附近。 可以使用焦点元素完成此操作吗?
我知道了。 我没有在焦点文本中添加信息,而是在svg文本中添加了文本。 我在此svg文本中添加了一个id属性,并在鼠标移出时删除了svg id。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.