0

JavaScript と D3 は初めてです。私は（多すぎる）アニメーションで動作する棒グラフを持っていますが、棒グラフのサイズが上下するようにデータをソートする方法を一生理解することはできません。 -選別。私は .sort(function(a,b){return a.value - b.value;}) のバリエーションをあちこちで試しましたが、正直なところ、チェーンのどこに置くべきか、またはそれは正しいコマンドです。例が必要です、お願いします！

D3 の Scott Murray チュートリアルから取得した以下の棒グラフを考えると、最初に表示される前にグラフをどのように並べ替えればよいでしょうか? そして、どのように私はそれを頼りにしますか？データセットを並べ替えるだけで、すべての svg 要素が自動的に再描画されますか?それとも、データセットを並べ替えてから、要素を再描画するコードを記述する必要がありますか? （ご覧のとおり、まったくの初心者です！）

//Width and height
var w = 500;
var h = 100;
var barPadding = 1;

var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];

//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);

svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", function(d, i) {
return i * (w / dataset.length);
})
.attr("y", function(d) {
    return h - (d * 4);
})
.attr("width", w / dataset.length - barPadding)
.attr("height", function(d) {
    return d * 4;
});

どんな助けでも大歓迎です

ジョン

4

2 に答える 2

2

コード スニペットで d3 sort を使用する例を次に示します。必要に応じて、提供されているドキュメントでこれについて詳しく読むことができます。

d3.js のソート方法: https://github.com/mbostock/d3/wiki/Selections#sort

JavaScript のデフォルトの Web API メソッドの一部として並べ替え: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

  dataSet = [{
    text: 'cancel',
    index: 0,
    icon: 'images/cancel.svg',
    callback: function() {
      _this.cancel()
    }
  }, {
    text: 'previous',
    index: 5,
    icon: 'images/prev-avail.svg',
    callback: function() {
      _this.previousSegment();
    }
  }, {
    text: 'next',
    index: 2,
    icon: 'images/next-avail.svg',
    callback: function() {
      _this.nextSegment()
    }
  }, {
    text: 'nextAdded',
    index: 2,
    icon: 'images/example.svg',
    callback: function() {
      _this.nextSegment()
    }
  }];

  $('#div1').html(JSON.stringify(dataSet));

  dataSet.sort(function(a, b) {
    return a.index - b.index
  });

  $('#div2').html(JSON.stringify(dataSet));
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="div1"></div>
<br/>
<div id="div2"></div>

于 2015-11-13T18:12:26.507 に答える
0

データを並べ替えたいだけですか、それとも何か不足していますか?

var dataset = [...];

dataset.sort(function(a,b){ 
    return a - b; 
});

// Create SVG element
// ...
于 2013-02-25T23:58:45.993 に答える