D3ティップと積み重ね棒グラフ

Question

以前は、StackOverflow（結果here）の助けを借りて、d3とd3tipを使って本当にきれいな棒グラフを作成しました。今回は、積み上げ棒グラフを使ってd3tipと似たようなものを実現しようとしています。ウェブ上にある例を使って積み上げ棒グラフを作成することはできましたが、ヒントを得ることはできません（積み上げ棒グラフのスニペットhere）。

あなたは、私は、これは次のコードを使用して達成しようとしたスニペットで見ることができるよう：

svg.selectAll(".g") 
    .data(data) 
    .enter().append("rect") 
    .attr("class", "bar") 
    .attr("x", function(d) { 
     return x(d.Year); 
    }) 
    .attr("width", x.rangeBand()) 
    .attr("y", function(d) { 
     return y(d.N); 
    }) 
    .attr("height", function(d) { 
     return height - y(d.N); 
    }) 
    .on('mouseover', tip.show) 
    .on('mouseout', tip.hide); 

以前に完全にうまく働きました。しかし何らかの理由でバーをマウスオーバーすると何も表示されません。積み重ねた部分にいくつかの問題が発生することが予想されましたが、なぜチップが全く表示されないのか分かりません。

チップの内容はまだ開発されています（私はまだ正確に何を表示したいのか議論しています）が、チップを表示する必要があります。私はここで何が欠けていますか？

Answer 1

マウスオーバーの場所が間違っています。あなたが棒グラフを作成する前に、積み重ねた棒グラフ（明らかに）がありますが、戻されたデータは異なるでしょう。

たとえば、マウスオーバーでは何もしません。なぜなら、呼び出された場所は何もしないからです。

は、だから私はあなたがそれを必要な場所への上にマウスを変更しているし、次のように記録されたデータは次のとおりです。

Object {name: "Trek", y0: 43, y1: 86} 

ので、代わりのd.Year & d.N、あなたが持ち帰ることができる唯一のデータがd.nameです。これは、スタックを作って持っているデータにある：

data.forEach(function(d) { 
    var y0 = 0; 
    d.ages = color.domain().map(function(name) { return {name: name, y0: y0, y1: y0 += +d[name]}; }); 
    d.total = d.ages[d.ages.length - 1].y1; 
    }); 

は、だから私はあなたがこのために先端更新しました：

return "<strong>Name:</strong> <span style='color: #DA6A26'>" + d.name + "</span>" 

そして、100行目にあなたのマウスオーバーを移動：

.on('mouseover', function(d){ 
      console.log('mouseover'); 
      console.log(d) 
     tip.show(d); 
     }) 
     .on('mouseout', tip.hide); 

私はそこにログを残して、どのデータが出力されているかを確認できます。 cssファイルへのあなたのリンクが間違っていたところでhttp://plnkr.co/edit/nrslJjlM37Hu5DR2ZBXw?p=preview

：

はplnkrを更新しました。従ってcss/style.cssの代わりにそれはちょうどべきであるstyle.css

今マウスオーバーで、あなたは名前を得る。これを望まないなら、スタックを作成するときに正しいデータを持って来る必要があります。私はこの行に：

d.ages = color.domain().map(function(name) { return {name: name, y0: y0, y1: y0 += +d[name]}; });