英文:
How to control the return order using D3.js nest() and rollup()
问题
我在使用D3.js的.nest()和.rollup()时遇到一个问题，无法获得数据数组的一致性返回/顺序。当数组更新为新名称或类似名称时，正确的数字是正确的，但我无法设置从最近添加的名称到最后添加的名称的顺序。当添加新名称或其他类似名称时，我会得到一个随机的顺序。下面是我最近的返回示例。我希望实现的顺序是一个固定的顺序（逆序），从底部向顶部显示；例如，Field-8、Field-7、Field-6、Field-5...Field-1。我包含了我的代码示例。我希望这个请求能够明白。我的返回如下：
[{
"num": 65,
"value": "Field-1"
}, {
"num": 64,
"value": "Field-8"
}, {
"num": 63,
"value": "Field-7"
}, {
"num": 62,
"value": "Field-7"
}, {
"num": 61,
"value": "Field-8"
}, {
"num": 60,
"value": "Field-6"
}, {
"num": 59,
"value": "Field-6"
}, {
"num": 58,
"value": "Field-7"
}, {
"num": 57,
"value": "Field-8"
}, {
"num": 56,
"value": "Field-5"
}, {
"num": 55,
"value": "Field-4"
}, {
"num": 54,
"value": "Field-4"
}, {
"num": 53,
"value": "Field-4"
}, {
"num": 52,
"value": "Field-5"
}, {
"num": 51,
"value": "Field-3"
}, {
"num": 50,
"value": "Field-5"
}, {
"num": 49,
"value": "Field-5"
}, {
"num": 48,
"value": "Field-1"
}, {
"num": 47,
"value": "Field-5"
}, {
"num": 46,
"value": "Field-4"
}, {
"num": 45,
"value": "Field-4"
}, {
"num": 44,
"value": "Field-1"
}, {
"num": 43,
"value": "Field-5"
}, {
"num": 42,
"value": "Field-5"
}, {
"num": 41,
"value": "Field-3"
}, {
"num": 40,
"value": "Field-1"
}, {
"num": 39,
"value": "Field-5"
}, {
"num": 38,
"value": "Field-5"
}, {
"num": 37,
"value": "Field-5"
}, {
"num": 36,
"value": "Field-5"
}, {
"num": 35,
"value": "Field-4"
}, {
"num": 34,
"value": "Field-1"
}, {
"num": 33,
"value": "Field-3"
}, {
"num": 32,
"value": "Field-2"
}, {
"num": 31,
"value": "Field-5"
}, {
"num": 30,
"value": "Field-1"
}, {
"num": 29,
"value": "Field-1"
}, {
"num": 28,
"value": "Field-1"
}, {
"num": 25,
"value": "Field-1"
}, {
"num": 24,
"value": "Field-2"
}, {
"num": 22,
"value": "Field-2"
}, {
"num": 21,
"value": "Field-1"
}, {
"num": 19,
"value": "Field-4"
}, {
"num": 17,
"value": "Field-3"
}, {
"num": 16,
"value": "Field-3"
}, {
"num": 15,
"value": "Field-1"
}, {
"num": 11,
"value": "Field-2"
}, {
"num": 10,
"value": "Field-3"
}]
$(function () {
var chartData=getListData("ViewsTest");
var data=[];
for(var i=0;i<chartData.length;i++){
data.push({"num":chartData[i].ID, "value":chartData[i].Views});
}
initChart(data);
});
function initChart(chartData){
data = chartData;
var baseCount = d3.nest()
.key(function(d) { return d.value; })
.rollup(function(v) { return v.length; })
.entries(data);
for(var i =1; i<= baseCount.length; i++){
$('.vCount').append($('<div/>', { id: 'r' + i, 'class' : 'ansbox'}))
}
var mainDiv = d3.select("body")
.attr("id", "main");
mainDiv.selectAll(".ansbox")
.data(baseCount)
.append("div")
.attr("class", function(d,i) { return 'views';})
.html(function (d) { return d.key + " : " + d.values ; });
}
[![示例图像][1]][1]
请注意，这里没有包含代码中的HTML部分，仅包含JavaScript和JSON数据的翻译。
<details>
<summary>英文:</summary>
I'm having an issue getting a consistent return/order from my data array using D3.js .nest() and .rollup(). When the array is updated with new name or alike name, the correct number account is correct but I can't set a order from the recent name added to the last name that was added. I get a random order when a new name is added or another like name is added. Below is an example of what my recent return looks like. The order I'm seeking to achieve is a fixed order (reverse order) displaying from bottom to top; i.e, Field-8, Field-7, Field-6, Field-5...Field-1. I included an example of my code. I hope this request for advice make sense. My return below:
[![enter image description here][1]][1]
[{
"num": 65,
"value": "Field-1"
}, {
"num": 64,
"value": "Field-8"
}, {
"num": 63,
"value": "Field-7"
}, {
"num": 62,
"value": "Field-7"
}, {
"num": 61,
"value": "Field-8"
}, {
"num": 60,
"value": "Field-6"
}, {
"num": 59,
"value": "Field-6"
}, {
"num": 58,
"value": "Field-7"
}, {
"num": 57,
"value": "Field-8"
}, {
"num": 56,
"value": "Field-5"
}, {
"num": 55,
"value": "Field-4"
}, {
"num": 54,
"value": "Field-4"
}, {
"num": 53,
"value": "Field-4"
}, {
"num": 52,
"value": "Field-5"
}, {
"num": 51,
"value": "Field-3"
}, {
"num": 50,
"value": "Field-5"
}, {
"num": 49,
"value": "Field-5"
}, {
"num": 48,
"value": "Field-1"
}, {
"num": 47,
"value": "Field-5"
}, {
"num": 46,
"value": "Field-4"
}, {
"num": 45,
"value": "Field-4"
}, {
"num": 44,
"value": "Field-1"
}, {
"num": 43,
"value": "Field-5"
}, {
"num": 42,
"value": "Field-5"
}, {
"num": 41,
"value": "Field-3"
}, {
"num": 40,
"value": "Field-1"
}, {
"num": 39,
"value": "Field-5"
}, {
"num": 38,
"value": "Field-5"
}, {
"num": 37,
"value": "Field-5"
}, {
"num": 36,
"value": "Field-5"
}, {
"num": 35,
"value": "Field-4"
}, {
"num": 34,
"value": "Field-1"
}, {
"num": 33,
"value": "Field-3"
}, {
"num": 32,
"value": "Field-2"
}, {
"num": 31,
"value": "Field-5"
}, {
"num": 30,
"value": "Field-1"
}, {
"num": 29,
"value": "Field-1"
}, {
"num": 28,
"value": "Field-1"
}, {
"num": 25,
"value": "Field-1"
}, {
"num": 24,
"value": "Field-2"
}, {
"num": 22,
"value": "Field-2"
}, {
"num": 21,
"value": "Field-1"
}, {
"num": 19,
"value": "Field-4"
}, {
"num": 17,
"value": "Field-3"
}, {
"num": 16,
"value": "Field-3"
}, {
"num": 15,
"value": "Field-1"
}, {
"num": 11,
"value": "Field-2"
}, {
"num": 10,
"value": "Field-3"
}]
$(function () {
var chartData=getListData("ViewsTest");
var data=[];
for(var i=0;i<chartData.length;i++){
data.push({"num":chartData[i].ID, "value":chartData[i].Views});
}
initChart(data);
});
function initChart(chartData){
data = chartData;
var baseCount = d3.nest()
.key(function(d) { return d.value; })
.rollup(function(v) { return v.length; })
.entries(data);
for(var i =1; i<= baseCount.length; i++){
$('.vCount').append($('<div/>', { id: 'r' + i, 'class' : 'ansbox'}))
}
var mainDiv = d3.select("body")
.attr("id", "main");
mainDiv.selectAll(".ansbox")
.data(baseCount)
.append("div")
.attr("class", function(d,i) { return "views"})
.html(function (d) { return d.key + " : " + d.values ; });
}
[1]: https://i.stack.imgur.com/DhsBZ.jpg
</details>
# 答案1
**得分**: 1
以下是您要翻译的内容：
"看到您的数据会很好。不过，通常情况下，`d3.nest` 会按照在数据中找到它们的顺序生成键。例如，如果数据如下所示：
let data = [
{ key: 2, value: "red" },
{ key: 1, value: "yellow" },
{ key: 2, value: "blue" }
]
如果您以 `key` 进行嵌套，那么您将得到一个类似这样的数组：
[
{key: 2, values: ...},
{key: 1, values: ...}
]
当然，您始终可以对数组进行排序。以下是一个示例。
```js
let data = [
{ key: 2, value: "red" },
{ key: 1, value: "yellow" },
{ key: 2, value: "blue" }
];
let nested = d3
.nest()
.key((o) => o.key)
.entries(data)
let div = d3.select('#v5')
div.append('h3').style('margin', '10px').text('Unsorted')
let table = div.append('table')
let head = table.append('tr')
head.append('th').text('Field')
head.append('th').text('Count')
nested.forEach(function(d) {
let tr = table.append('tr');
tr.append('td').text(`Field-${d.key}`)
tr.append('td').text(`${d.values.length}`)
});
div.append('h3').style('margin', '10px').text('Now sort')
nested.sort((a, b) => (a.key < b.key ? -1 : 1))
let table2 = div.append('table')
let head2 = table2.append('tr')
head2.append('th').text('Field')
head2.append('th').text('Count')
nested.forEach(function(d) {
let tr = table2.append('tr');
tr.append('td').text(`Field-${d.key}`)
tr.append('td').text(`${d.values.length}`)
})
表格样式：
table {
border-collapse: collapse;
}
th, td {
border-bottom: solid 1px black;
padding: 3px;
text-align: center;
}
th:first-child, td:first-child {
border-right: solid 1px black
}
HTML：
<script src="https://d3js.org/d3.v5.min.js"></script>
<div id="v5"></div>
尽管如此，值得指出的是，d3.nest 已被弃用，不再推荐使用，而是推荐使用 d3.group 和 d3.rollup。您可以查看 V6 迁移指南。"
英文:
It would be great to see your data. Generally, though, d3.nest will produce keys in the order that it finds them in the data. For example, if the data looks like so:
let data = [
{ key: 2, value: "red" },
{ key: 1, value: "yellow" },
{ key: 2, value: "blue" }
]
and you nest on key, then you're going to get an array like
[
{key: 2, values: ...},
{key: 1, values: ...}
]
Of course, you can always sort the array. Here's an example.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
let data = [
{ key: 2, value: "red" },
{ key: 1, value: "yellow" },
{ key: 2, value: "blue" }
];
let nested = d3
.nest()
.key((o) => o.key)
.entries(data)
let div = d3.select('#v5')
div.append('h3').style('margin', '10px').text('Unsorted')
let table = div.append('table')
let head = table.append('tr')
head.append('th').text('Field')
head.append('th').text('Count')
nested.forEach(function(d) {
let tr = table.append('tr');
tr.append('td').text(`Field-${d.key}`)
tr.append('td').text(`${d.values.length}`)
});
div.append('h3').style('margin', '10px').text('Now sort')
nested.sort((a, b) => (a.key < b.key ? -1 : 1))
let table2 = div.append('table')
let head2 = table2.append('tr')
head2.append('th').text('Field')
head2.append('th').text('Count')
nested.forEach(function(d) {
let tr = table2.append('tr');
tr.append('td').text(`Field-${d.key}`)
tr.append('td').text(`${d.values.length}`)
})
<!-- language: lang-css -->
table {
border-collapse: collapse;
}
th, td {
border-bottom: solid 1px black;
padding: 3px;
text-align: center;
}
th:first-child, td:first-child {
border-right: solid 1px black
}
<!-- language: lang-html -->
<script src="https://d3js.org/d3.v5.min.js"></script>
<div id="v5"></div>
<!-- end snippet -->
Having said all that, it's worth pointing at that d3.nest has been deprecated and removed in favor of d3.group and d3.rollup. You might have a look at the V6 Migration Guide.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论