为折线图创建D3工具提示的问题

我正在尝试从该网站（http://www.d3noob.org/2014/07/my-favourite-tooltip-method-for-line.html）为我的双轴折线图重新创建工具提示。但是我一直运行到哪里了一圈只出现在图表的右上方点错误，我得到的错误为折线图创建D3工具提示的问题

类型错误：D1是未定义的上线137

我继续寻找解决方案sbut还没有发现任何如此的任何帮助将欣赏。

继承人的代码：

<!DOCTYPE html> 
<html> 
<head> 
<script type="text/javascript" src="d3/d3.min.js"></script> 
</head> 
<body> 
<script type="text/javascript"> 

// http://www.baseball-reference.com/teams/PIT/attend.shtml 

/* want interactive line chart showing two lines, total attendance and  attendance per game 
    cicles at vaious points that show information on hover about why attendance may be drastically different 
    ie opening of pnc park or world series team */ 

// Set the dimensions of the canvas/graph 
var margin = {top: 30, right: 50, bottom: 30, left: 150}, 
    width = 1000 - margin.left - margin.right, 
    height = 400 - margin.top - margin.bottom; 

// Method used for finding year corresponding with mouse location 
var bisectYear = d3.bisector(function(d) { return d.Year; }).left; 

// Set the ranges 
var x = d3.time.scale().range([0, width]); 
var y0 = d3.scale.linear().range([height, 0]); 
var y1 = d3.scale.linear().range([height, 0]); 

// Define the axes 
var xAxis = d3.svg.axis().scale(x) 
    .tickFormat(d3.format(".0f")) 
    .orient("bottom"); 

var yAxisLeft = d3.svg.axis().scale(y0) 
    .orient("left") 
    .ticks(5); 

var yAxisRight = d3.svg.axis().scale(y1) 
    .orient("right").ticks(5) 

// Define the first line 
var valueline = d3.svg.line() 
    .x(function(d) { return x(d.Year); }) 
    .y(function(d) { return y0(d.AttendancePerG); }); 

// Define the second line 
var valueline2 = d3.svg.line() 
    .x(function(d) { return x(d.Year); }) 
    .y(function(d) { return y1(d.Wins); }); 

// Adds the svg canvas 
var svg = d3.select("body") 
    .append("svg") 
     .attr("width", width + margin.left + margin.right) 
     .attr("height", height + margin.top + margin.bottom) 
    .append("g") 
     .attr("transform", 
      "translate(" + margin.left + "," + margin.top + ")");   

/////////////////// 
var lineSvg = svg.append("g");        // ********** 

var focus = svg.append("g")        // ********** 
    .style("display", "none");        // ********** 
/////////////////// 

// Get the data 
d3.csv("piratesAttendance.csv", function(error, data) { 
    data.forEach(function(d) { 
     d.Year = +d.Year; 
     d.AttendancePerG = +d.AttendancePerG 
     d.Wins = +d.Wins; 
    }); 

    // Scale the range of the data 
    x.domain(d3.extent(data, function(d) { return d.Year; })); 
    y0.domain([0, d3.max(data, function(d) { return d.AttendancePerG; })]); 
    y1.domain([0, d3.max(data, function(d) { return d.Wins; })]); 

    // Add the valueline path. 
    svg.append("path") 
     .attr("class", "line") 
     .attr("d", valueline(data)) 
     .attr("stroke", "gray") 
     .attr("stroke-width",2) 
     .attr("fill","none"); 

    // Add the second valueline path. 
    svg.append("path") 
     .attr("class", "line") 
     .attr("d", valueline2(data)) 
     .attr("stroke", "gold") 
     .attr("stroke-width",2) 
     .attr("fill","none"); 

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

    // Add the Left Y Axis 
    svg.append("g") 
     .attr("class", "y axis") 
     .style("fill","gray") 
     .call(yAxisLeft); 

    // Add the Right Y Axis 
    svg.append("g") 
     .attr("class", "y axis") 
     .attr("transform", "translate(" + width + ",0)") 
     .style("fill","gold") 
     .call(yAxisRight); 

    ///////////// 
    // append the circle at the intersection    // ********** 
    focus.append("circle")         // ********** 
     .attr("class", "y")        // ********** 
     .style("fill", "none")        // ********** 
     .style("stroke", "blue")       // ********** 
     .attr("r", 4);          // ********** 

    // append the rectangle to capture mouse    // ********** 
    svg.append("rect")          // ********** 
     .attr("width", width)        // ********** 
     .attr("height", height)       // ********** 
     .style("fill", "none")        // ********** 
     .style("pointer-events", "all")     // ********** 
     .on("mouseover", function() { focus.style("display", null); }) 
     .on("mouseout", function() { focus.style("display", "none"); }) 
     .on("mousemove", mousemove);      // ********** 

    function mousemove() {         // ********** 
     var x0 = x.invert(d3.mouse(this)[0]),    // ********** 
      i = bisectYear(data, x0, 1),     // ********** 
      d0 = data[i - 1],        // ********** 
      d1 = data[i],         // ********** 
      d = x0 - d0.date > d1.date - x0 ? d1 : d0;  // ********** 

    focus.select("circle.y")       // ********** 
     .attr("transform",        // ********** 
       "translate(" + x(d.Year) + "," +   // ********** 
          y0(d.AttendancePerG) + ")");  // ********** 
}              // ********** 
}); 

</script> 
</body> 
</html>

来源

2015-02-09 SR34

你能把它变成的jsfiddle或一个普通的，所以我们可以看到这个问题？或者至少分享一下piratesAttendance.csv的样子？ – 2015-02-09 21:19:38

不知道为什么你得到'd1是未定义的，至少，不是没有看到你的数据和调试一些东西，但不应该'd = x0 - d0.date> d1.date - x0？ d1：d0;'be'd = x0 - d0.Year> d1.Year - x0？ d1：d0;' – 2015-02-09 21:35:07

@HenryS heres jsfiddle with the csv in the html http://jsfiddle.net/SR34/1dtvxrjk/#&togetherjs=91PUASCGP7 – SR34 2015-02-10 14:23:01

这里是与固定的代码普拉克：http://plnkr.co/edit/Xj2ZyxqrY2PJVV0FML26

这里有几个问题。首先，您的数据未按日期排序（从最早到最新），这阻止了bisectYear函数正常工作（它总是返回1）。通过添加修正：

data.sort(function(a, b) { return a.Year - b.Year; });

其次，你的日期（年）值并没有被解析为Date对象，这是造成一系列的问题。从本质上讲，您的时间范围从1891毫秒到2014毫秒，而不是1891年到2014年！我说这点在哪里，你在CSV阅读：

data.forEach(function(d) { 
    d.Year = parseDate(d.Year) 
    ...

的一项新功能解析逼到基础上，充分一年Date：

var parseDate = d3.time.format("%Y").parse;

来源

2015-02-10 16:11:04

我想我的印象是，由于没有时间日月份元素，我不需要把年份当作日期。非常感谢你@HenryS – SR34 2015-02-10 17:20:52

为折线图创建D3工具提示的问题

回答

相关问题