css - キュービズム-選択した時間と行の値

Question

私はCubism.jsが大好きです

しかし、デモに欠けている機能を実装したいと思います。

そして、それは選択された時間と行の値を確認する必要があります。グラフ上にマウスオーバーすると、マウスカーソルが置かれている行の値が表示されます（垂直線の横の画像を参照）

これはどのように行うことができますか？

CSSを使用する機会がありますか、それともd3.jsを掘り下げる必要がありますか？

編集：私はストックデモを見つけました...しかし今でもこれがどのように行われるか手がかりです:(

Answer 1

CSSで遊ぶことで、それを簡単に実現できました。まず、すべての値を非表示にします。

.horizon .value {display: none;}

次に、ホバーで値を表示します。

.horizon:hover .value {display: inherit;}

Answer 2

ビューソースを確認してください：http：//bost.ocks.org/mike/cubism/intro/demo-stocks.html。必要なものは次のとおりです。 d3.select("body").append("div") .attr("class", "rule") .call(context.rule());

これは、context.rule（）を使用して、d3/cubism関数を実現します。

前の答えは、マウスが置かれている1行の値を示しています。cubism.jsルールは、すべての行の値を提供します。