爲折線圖創建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工具提示的問題

回答

相關問題