新手被selection.sort难住了
新手被selection.sort难住了
提问于 2013-02-25 23:09:15
我对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;
});非常感谢您的帮助
约翰
回答 2
Stack Overflow用户
发布于 2015-11-13 18:12:27
下面是在代码片段中使用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>
Stack Overflow用户
发布于 2013-02-25 23:58:46
您只是想对数据进行排序，还是我遗漏了什么？
var dataset = [...];
dataset.sort(function(a,b){
return a - b;
});
// Create SVG element
// ...页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15078301
复制
相似问题
新手被innerHTML难住了
c++中的新手被卡住了
新手被jQuery question...conditional语句卡住了
被.htaccess困住了
WebClient被卡住了？
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
