質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.48%

D3.jsで作っているサンプルにツールチップをつけたい

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,008

score 13

D3.jsを使ってローソク足を作ったサンプルプログラムに追加機能でマウスオーバーでそのローソクの情報をツールチップでだしたいのですが、プロが作ったコードなので何処に書けばいいのか解らないので質問させてもらってます。
すいませんが、どなたかわかる方いたら教えて欲しいです。
<body>
<button>Update</button>
<script src="http://d3js.org/d3.v4.min.js"></script>
<script src="http://techanjs.org/techan.min.js"></script>
<script>

var margin = {top: 20, right: 20, bottom: 30, left: 50},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;

var parseDate = d3.timeParse("%d-%b-%y");

var x = techan.scale.financetime()
.range([0, width]);

var y = d3.scaleLinear()
.range([height, 0]);

var candlestick = techan.plot.candlestick()
.xScale(x)
.yScale(y);

var xAxis = d3.axisBottom()
.scale(x);

var yAxis = d3.axisLeft()
.scale(y);

var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.csv("data.csv", function(error, data) {
var accessor = candlestick.accessor();

data = data.slice(0, 200).map(function(d) {
return {
date: parseDate(d.Date),
open: +d.Open,
high: +d.High,
low: +d.Low,
close: +d.Close,
volume: +d.Volume
};
}).sort(function(a, b) { return d3.ascending(accessor.d(a), accessor.d(b)); });

svg.append("g")
.attr("class", "candlestick");

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

svg.append("g")
.attr("class", "y axis")
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Price ($)");

// Data to display initially
draw(data.slice(0, data.length-20));
// Only want this button to be active if the data has loaded
d3.select("button").on("click", function() { draw(data); }).style("display", "inline");
});

function draw(data) {
x.domain(data.map(candlestick.accessor().d));
y.domain(techan.scale.plot.ohlc(data, candlestick.accessor()).domain());

svg.selectAll("g.candlestick").datum(data).call(candlestick);
svg.selectAll("g.x.axis").call(xAxis);
svg.selectAll("g.y.axis").call(yAxis);
}

</script>

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

check解決した方法

+1

ありがとうございます。解決しました。
svg.on("mousemove", function(d,i) {
var i = x.invertToIndex(d3.mouse(this)[0]);
//でx軸の配列番号が取得できるのでその後好きに表示可能になりました。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

D3.jsがグラフィック出力に用いているSVGではツールチップの内容をtitle要素で記述します.

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/11/10 16:57

    回答ありがとうございます。
    コードが長すぎて下記のURLで書いていたのでわかりにくくてすいません
    http://bl.ocks.org/andredumas/edf630690c10b89be390
    title要素もクリックイベントもcssを動的に作られてしまうためD3.jsでローソクを作成時に書かなくては
    ダメみたいなのですが、高値、安値、日時、売買数と多角的に書かれててどこに書いても動かなくて
    よろしければ何処に書くかだけ教えて頂けないでしょうか

    キャンセル

  • 2017/11/10 17:25

    >何処に書くかだけ教えて頂けないでしょうか
    自分で対処できないのであれば作者に直接尋ねてみては如何でしょうか?
    ローソクを描いている部分さえ見つかればtitle要素を追加するだけです.
    ...なお, グラフィカルなツールチップを想像されているのであればそれは無理です.

    キャンセル

  • 2017/11/16 21:13

    回答ありがとうございます
    グラフィカルなツールチップではなく、titleでもコンソール画面でもいいので、1本のローソクの情報をすべて表示したいだけなんですがローソクを作っている部分だけ抜いたのですがどこに書いてもダメで
    もし場所がわかるのであれば教えてくださると助かります。
    わかりにくい説明で申し訳ないですがよろしくお願いします。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.48%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る