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

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

新規登録して質問してみよう
ただいま回答率
85.51%
D3.js

D3.jsとは、データに基づいてHTMLやSVGドキュメントを編集するために作られた、小規模なオープンソースのJavaScript可視化ライブラリです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

0回答

216閲覧

d3.js v5 特定の値のグラフ位置のときにクリック要素を置きたい

kokekoko

総合スコア17

D3.js

D3.jsとは、データに基づいてHTMLやSVGドキュメントを編集するために作られた、小規模なオープンソースのJavaScript可視化ライブラリです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

1クリップ

投稿2019/01/16 12:02

したいこと
d3.jsで、線グラフの線上にクリック用要素と・印をおきたいです。

データによって変動しますが、たとえば[5,10]の位置に印とクリックイベントを設置したいです。
現在のコードになります。
このようなことは可能でしょうか?
よろしくおねがいします

.attrにクラス名などをデータセットの位置ごとに用意すればよいのでしょうか?

javascript

1 // 1. データの準備 2 var dataset = [[0,1],[1,3],[2,4],[3,6],[4,8],[5,10],[6,11],[7,13],[8,15],[9,16],[10,18],[11,20],[12,21]]; 3 4 var width = 700; // グラフの幅 5 var height = 300; // グラフの高さ 6 var margin = { "top": 30, "bottom": 60, "right": 30, "left": 60 }; 7 8 // 2. SVG領域の設定 9 var svg = d3.select("#chart").append("svg").attr("width", width).attr("height", height); 10 11 // 3. 軸スケールの設定 12 var xScale = d3.scaleLinear() 13 .domain([0, d3.max(dataset, function(d) { return d[0]; })]) 14 .range([margin.left, width - margin.right]); 15 16 var yScale = d3.scaleLinear() 17 .domain([0, d3.max(dataset, function(d) { return d[1]; })]) 18 .range([height - margin.bottom, margin.top]); 19 20 // 4. 軸の表示 21 var axisx = d3.axisBottom(xScale).ticks(5); 22 var axisy = d3.axisLeft(yScale).ticks(5); 23 24 svg.append("g") 25 .attr("transform", "translate(" + 0 + "," + (height - margin.bottom) + ")") 26 .call(axisx) 27 .append("text") 28 .attr("fill", "black") 29 .attr("x", (width - margin.left - margin.right) / 2 + margin.left) 30 .attr("y", 35) 31 .attr("text-anchor", "middle") 32 .attr("font-size", "10pt") 33 .attr("font-weight", "bold") 34 .text("時間"); 35 36 svg.append("g") 37 .attr("transform", "translate(" + margin.left + "," + 0 + ")") 38 .call(axisy) 39 .append("text") 40 .attr("fill", "black") 41 .attr("text-anchor", "middle") 42 .attr("x", -(height - margin.top - margin.bottom) / 2 - margin.top) 43 .attr("y", -35) 44 .attr("transform", "rotate(-90)") 45 .attr("font-weight", "bold") 46 .attr("font-size", "10pt") 47 .text("heart"); 48 49 // 5. ラインの表示 50 svg.append("path") 51 .datum(dataset) 52 .attr("fill", "none") 53 .attr("stroke", "steelblue") 54 .attr("stroke-width", 1.5) 55 .attr("d", d3.line() 56 .x(function(d) { return xScale(d[0]); }) 57 .y(function(d) { return yScale(d[1]); }));

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問