添加動態提示到streamgraph d3.js

Question

林在streamgraph工作的那一刻，我想提示添加到與此類似http://archive.stamen.com/mtvmovies-streamgraph/chart.html

的提示我現在真的不工作，每一層在所有。我所得到的是'NaN'顯示在工具提示框中。

有什麼建議？我的代碼如下。

在此先感謝。

var customPalette = [ 
     "#ff7f0e", "#2ca02c", "#00FFFF", "#d62728", "#9467bd", 
     "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf" 
    ]; 

    var format = d3.time.format("%y"); 

    //creating margins around the graph 
    var margin = {top: 20, right: 30, bottom: 30, left: 200}, 
     width = 1200 - margin.left - margin.right, 
     height = 500 - margin.top - margin.bottom; 

    //OUTPUT RANGE 
    var x = d3.time.scale() 
     .range([0, width]); 

    //OUTPUT RANGE 
    var y = d3.scale.linear() 
     .range([height, 0]); 

    //assining custom colors to layers 
    var colours = d3.scale.ordinal().range(customPalette); 

    var xAxis = d3.svg.axis() 
     .scale(x) 
     .orient("top") 
     .ticks(d3.time.years); 

    var yAxis = d3.svg.axis() 
     .scale(y) 
     .orient("left"); 

    //ctreate stack layout 
    var stack = d3.layout.stack() 
     .offset("wiggle") 
     .order("reverse") 
     .values(function(d) { return d.values; }) 
     .x(function(d) { return d.date; }) 
     .y(function(d) { return d.amount; }); 

    //creates array of datya elements for stacked bar graph 
    var nest = d3.nest() 
     .key(function(d) { return d.age; }); 

    //create area 
    var area = d3.svg.area() 
     //adds curviture 
     .interpolate("monotone") 
     .x(function(d) { return x(d.date); }) 
     .y0(function(d) { return y(d.y0); }) 
     .y1(function(d) { return y(d.y0 + d.y); }); 

    var svg = d3.select("body").append("svg") 
     //defines length of x-axis 
     .attr("width", width + margin.left + margin.right) 
     //defines height of y-axis 
     .attr("height", height + margin.top + margin.bottom) 
     .append("g") 
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 


    d3.csv("data6.csv", function(data) { 
     data.forEach(function(d) { 
     // Convert strings to numbers 
     d.date = format.parse(d.date); 
     d.amount = +d.amount; 
     }); 

     //returns an array of objects with a key feild (0-20yrs....) 
     //and a value array which contains associated records 
     var layers = stack(nest.entries(data)); 

     //.extent() returns min and max values of argument 
     x.domain(d3.extent(data, function(d) { return d.date; })); 
     // 
     y.domain([0, d3.max(data, function(d) { return d.y0 + d.y; })]); 

     svg.selectAll(".layer") 
      .data(layers) 
     .enter().append("path") 
      .attr("class", "layer") 
      .attr("d", function(d) { return area(d.values); }) 
      .style("fill", function(d, i) { return colours(i); }); 

     //CURRENT TOOLTIP CODE 
     var toolTip = svg.selectAll("path") 
         .append("svg:title") 
        .text(function(d) { return (d.date) + (d.amount) });; 


    svg.append("g") 
      .attr("class", "x axis") 
      .attr("transform", "translate(0," + 0 + ")") 
      .call(xAxis); 

    svg.append("g") 
      .attr("class", "y axis") 
      .call(yAxis); 

    }); 

Answer 1

你是希望來連接的d.date和d.close值，或者你有興趣加入的值並返回結果？

如果後者： 我敢打賭，d.date和d.close的類型不是你所期望的。我建議，如果您還沒有，請添加一些調試代碼來檢查這些變量的類型。例如：

//CURRENT TOOLTIP CODE 
var toolTip = svg.selectAll("path") 
    .append("svg:title") 
    .text(function(d) { 
    console.log('d.date type:' + typeof d.date + 'd.close type:' + typeof d.close); 
    return (d.date) + (d.close); 
    } 
); 

此外，你必須在該聲明中您的代碼段末尾的多餘的分號。

如果是前者： 一個或兩個是number類型和Javascript將嘗試添加它們，當你使用+操作而不將它們。要返回字符串：

.text(function(d) { 
    return d.date.toString() + ' ' + d.close.toString(); 
});