Question

我正在编写D3多线图的代码。 2行与工具提示一起正确显示我在鼠标悬停时使用焦点元素。这是代码：

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)");
}

在这种情况下，鼠标悬停上的文字出现在焦点元素圆周围。我想要的是鼠标悬停文本应该位于图表内部的绝对位置，例如，在图表的左上角而不是焦点圆圈附近。这可以用焦点元素来完成吗？

Answer 1

我得到了它的工作。我没有附加信息的焦点文本，而是附加了svg文本。我在这个svg文本中添加了一个id属性，在鼠标输出时，我删除了svg id。

D3鼠标悬停文字定位

1 个答案: