1

私は現在ストリームグラフに取り組んでいます。この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);

    });
4

1 に答える 1

0

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);
   }
);

また、コード スニペットのステートメントの最後に余分なセミコロンがあります。

前者の場合: 一方または両方が型であり、演算子を使用すると、連結する代わりにnumberJavascript がそれらを追加しようとします。+文字列を返すには:

.text(function(d) {
  return d.date.toString() + ' ' + d.close.toString();
});
于 2013-01-07T16:36:17.863 に答える