svg.append('g') .call(xAxis) .attr("transform", "translate(0," + (height - padding.bottom) + ")") .selectAll("text") .attr("font-size", "10px") .attr("dx", "50px"); var ymax = d3.max(data, function(d) { return d.value; // y轴 var yScale = d3.scaleLinear() .domain([0, ymax]) .range([height - padding.bottom, padding.top]); var yAxis = d3.axisLeft() .scale(yScale) .ticks(10); svg.append('g') .call(yAxis) .attr("transform", "translate(" + padding.left + ",0)"); var curveLine = d3.line() .x(function(d) { return xScale(d.date); .y(function(d) { return yScale(d.value); .curve(d3.curveCatmullRom.alpha(0.5)); svg.append("path") .datum(data) .attr("fill", "none") .attr("stroke", "steelblue") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", curveLine);

添加坐标点标识

svg.append("g") .selectAll('circle') .data(data) .join("circle") .attr("r", 5) .attr("fill", "white") .attr("stroke", "steelblue") .attr("stroke-width", 1.5) .attr("transform", function(item) { return "translate(" + xScale(item.date) + "," + yScale(item.value) + ")";

添加tips

添加tips，一个圆点及数据文本

var tips = svg.append("g") .attr("class", "tips") .style("display", "none"); tips.append("circle") .attr("r", 3); tips.append("text") .attr("x", 8) .attr("dy", ".35em");

添加一个和 svg 同等大小的透明 rect 面板用来触发事件

// d3.mouse(this)[0] 获取当前鼠标位置的x坐标 // xScale.invert() 转为曲线上的x坐标 xScale.invert(d3.mouse(this)[0]) // d3.bisector() 获取当前曲线上x坐标对应数据中的点序号 var bisect = d3.bisector(function(d) { return d.date; }).left; bisect(data, xdata, 1, data.length - 1); svg.append("rect") .attr("class", "overPlane") .attr("width", width) .attr("height", height) .attr("opacity", 0) .on("mouseover", function() { tips.style("display", null); .on("mouseout", function() { tips.style("display", "none"); .on("mousemove", function() { var xdata = xScale.invert(d3.mouse(this)[0]); var yIndex = bisect(data, xdata, 1, data.length - 1); var d0 = data[yIndex - 1], d1 = data[yIndex], d = xdata - d0.date > d1.date - xdata ? d1 : d0; tips.attr("transform", "translate(" + xScale(d.date) + "," + yScale(d.value) + ")"); tips.select("text").text(d.value);

线性的数值展示

.on("mousemove", function() { var mouse = d3.mouse(this); var begin = 0, end = line[0].getTotalLength(), target = null; // 已知当前鼠标x轴坐标，求出对应的path上的坐标点 while(true) { target = Math.floor((begin + end) / 2); // getPointAtLength 返回给定路径上给定长度的点坐标 pos = line[0].getPointAtLength(target); if((target === end || target === begin) && pos.x !== mouse[0]) { break; // 当返回的路径的x坐标和鼠标对应的x坐标重合 break; if(pos.x > mouse[0]) end = target; else if(pos.x < mouse[0]) begin = target; else break; tips.select("text").text(yScale.invert(pos.y).toFixed(2)); tips.attr("transform", "translate(" + mouse[0] + "," + pos.y + ")");