D3 JavaScriptバーチャート

StackOverflow https://stackoverflow.com/questions/8347421

  •  27-10-2019
  •  | 
  •  

質問

D3に関するチュートリアルを作成しようとしていますが、十分な詳細が必要である以外に役立つカップルWebサイトを見つけました。

バーチャートを出力する次のコードがあります。 

<html>
<head>
<div id="mainGraph">
        </div>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<script type="text/javascript">

var t = 1, // start time (seconds since epoch)
    v = 0, // start value (subscribers)
    data = d3.range(33).map(next); // starting dataset

 function next() {
   return {
    time: ++t,
     value: v = ~~Math.max(10, Math.min(80, v + 3 *( Math.random() - .5))
   };
}
setInterval(function() {
   data.shift();
   data.push(next());
 }, 1500);

  var w = 40,
      h = 100;

  var x = d3.scale.linear()
      .domain([0, 1])
      .range([0, w]);

  var y = d3.scale.linear()
      .domain([0, 100])
     .rangeRound([0, h]);

     var chart = d3.select("body")
     .append("svg:svg")
     .attr("class", "chart")
     .attr("width", w * data.length + 10)
     .attr("height", h);

     chart.selectAll("rect")
     .data(data)
    .enter().append("svg:rect")
     .attr("x", function(d, i) { return x(i) + 5; })
     .attr("y", function(d) { return h - y(d.value) + 5; })
     .attr("width", w)
     .attr("height", function(d) { return y(d.value); });

     chart.append("svg:line")
     .attr("x1", 0)
     .attr("x2", w * data.length)
     .attr("y1", h + 5)
     .attr("y2", h + 5)
     .attr("stroke", "#000");





    </script>           
    </body>
    </html>

私が今直面している問題は、私がデータのセットを変更しようとするとき、私はv = math.exp（t）のようにvをtの機能に入れようとしていることです。これは機能していません。マックスとminの間隔を変更しましたが。ありがとうございました。

役に立ちましたか？

解決 

setInterval(function() {
   data.shift();
   data.push(next());
 }, 1500);

setInterval 1.5秒ごとにコードを実行します

   data.shift();

配列の最初の要素を削除します data （乱数で満たされています）

   data.push(next());

配列の最後に新しいランダム値を挿入します。 next() 乱数を生成する関数です。

だから、要約すると、 data.push(next()); 配列の最後に新しいランダム値を挿入します data

他のヒント

番号ジェネレーターを使用するのではなく、チュートリアルに固定データを渡すことを検討することをお勧めします。チャートユーザーが個別にデータを生成し、データをチャートツールに渡すことがより一般的です。私はいつもそうするのが役に立つと思います。

一般的なデータ入力形式は、d3.csvポストパス文字列形式を使用することです。

var dataSet1 = [
  {xCoordinate: "Legend String 1", magnitude: 54, link: "http://www.if4it.com"},
  {xCoordinate: "Legend String 2", magnitude: 21, link: "http://www.if4it.com/glossary.html"},
  {xCoordinate: "Legend String 3", magnitude: 31, link: "http://www.if4it.com/resources.html"},
  {xCoordinate: "Legend String 4", magnitude: 14, link: "http://www.if4it.com/taxonomy.html"},
  {xCoordinate: "Legend String 5", magnitude: 19, link: "http://www.if4it.com/disciplines.html"},
  {xCoordinate: "Legend String 6", magnitude: 47, link: "http://www.if4it.com"},
  {xCoordinate: "Legend String 7", magnitude: 27, link: "http://www.if4it.com/glossary.html"}];

githubには「」と呼ばれる作業例があります。一般的なHTMLレイアウトコンストラートと混合された複数の垂直バーチャート."

私が仕事に取り掛かりたいことの1つは、グラフの右側にあるテキストの凡例をマウスオーバーするときに、チャート内の特定のバーを強調表示するなどのイベントを制御することです。その方法がわかっている場合は、お気軽に詳しく説明してください。

これが役立つことを願っています。

フランク

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top