如何使用 D3.js nest（）和 rollup（）控制退货顺序-解网

问：

我在使用 D3.js .nest（）和 .rollup（）从我的数据数组中获取一致的返回/顺序时遇到了问题。当数组使用新名称或类似名称更新时，正确的数字帐户是正确的，但我无法设置从最近添加的名称到添加的姓氏的顺序。当添加新名称或添加另一个类似名称时，我会得到一个随机顺序。以下是我最近回报的一个例子。我寻求实现的顺序是从下到上显示的固定顺序（反向顺序）;即 Field-8、Field-7、Field-6、Field-5......字段 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 ; });
}

JavaScript jQuery d3.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
}

<script src="https://d3js.org/d3.v5.min.js"></script>
<div id="v5"></div>

说了这么多，值得一提的是，它已被弃用和删除，取而代之的是和。您可以查看 V6 迁移指南。d3.nestd3.groupd3.rollup

如何使用 D3.js nest（）和 rollup（）控制退货顺序

How to control the return order using D3.js nest() and rollup()

评论

评论

如何使用 D3.js nest（） 和 rollup（） 控制退货顺序

How to control the return order using D3.js nest() and rollup()

评论

评论

如何使用 D3.js nest（）和 rollup（）控制退货顺序