Question

我是JavaScript和D3的新手。我有条形图使用（太多）动画，但我不能为我的生活弄清楚如何排序数据，使条形图的大小上升或下降，更不用说写一个允许用户重新设置的功能-分类。我已经尝试了.sort（函数（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;
});

任何帮助非常感谢

约翰

Answer 1

以下是在代码段中使用d3排序的示例。如果您愿意，可以在他们提供的文档中阅读更多相关信息。

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

＆＃13;

  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));

＆＃13;

<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>

＆＃13;

新手被selection.sort难倒

1 个答案: