javascript - 将动态工具提示添加到streamgraph d3.js

Question

我目前正在处理流图，我想向每个图层添加类似于此的工具提示 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();
});