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 排序的示例。如果您愿意，可以在他们提供的文档中阅读更多相关信息。

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