将CSV文件中列出的重复名称分组，并使用d3.js在单独的Div中显示每组的总数

czq61nw1 于 2023-03-05 发布在其他

关注(0)|答案(1)|浏览(151)

我有一个CSV文件，其中有一列包含重复的名字（字符串）。我喜欢将所有的别名/重复的名字分组，计数/添加它们，并将它们的总数放在一个div中;即，分区基地1：20，分区基地2：80，第三分区基地：120.我尝试使用d3.js来实现这个想法，我得到了要出现在div中的名称，但不知道如何创建不同重复名称（字符串）的总Base计数并将其放置在提到的div中。使用D3是否可行？下面是我迄今为止的尝试。CSV列/数据如下所示：

d3.selectAll(".container").append("div")
    .attr("id", function(d) { return  "base" + d.id})
    .html(function(d, i) {  
        if('Base' + d.id === 'Base' + d.id){
                 return data[i].location;
        }
    })

/////////My modification of your suggestion////////
var baseCount = d3.nest()
  .key(function(d) { return d.value; })
  .rollup(function(v) { return v.length; })
  .entries(data);
console.log(baseCount); 

// append divs
var mainDiv = d3.selectAll(".imgContainer");

mainDiv.selectAll(".imgContainer").data(baseCount).enter().append("div").attr("id", function(d) { return  "bases" + d.id}).html(function (d) {
  return d.values;
 // return "<pre>" + d[0] + " : " + d[1] + "</pre>";
 });

csv

来源：https://stackoverflow.com/questions/75570250/group-duplicated-names-listed-in-csv-file-and-display-the-total-number-of-each-g

1条答案

按热度按时间

t40tm48m1#

D3v6以上版本有一个.rollups数组转换，可以满足你的需要。如果你使用的是早期版本的D3，有一些等效的转换，或者你也可以编写普通的Javascript。
rollups方法可以创建一个基本id和它们的计数的"摘要"，然后你可以将输出数组传递给一个数据连接来创建div。
示例如下：

// summary of data
const baseSummary = d3.rollups(fakeData, v => v.length, d => d.name);

// append divs
const mainDiv = d3.select("body")
  .append("div")
  .attr("id", "main");
  
mainDiv.selectAll(".baseDiv")
  .data(baseSummary)
  .enter()
  .append("div")
  .attr("class", "baseDiv")
  .html(d => `<pre>${d[0]} : ${d[1]}</pre>`)

.baseDiv {
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.6.0/d3.min.js"></script>
<script>
const fakeData = [
  {name: 'base3', value: 3},
  {name: 'base1', value: 3},
  {name: 'base1', value: 2},
  {name: 'base3', value: 10},
  {name: 'base2', value: 10},
  {name: 'base2', value: 10},
  {name: 'base1', value: 2},
  {name: 'base1', value: 9},
  {name: 'base1', value: 3},
  {name: 'base2', value: 7},
  {name: 'base2', value: 10},
  {name: 'base2', value: 6},
  {name: 'base1', value: 6},
  {name: 'base3', value: 10},
  {name: 'base1', value: 1},
  {name: 'base3', value: 1},
  {name: 'base3', value: 2},
  {name: 'base3', value: 10},
  {name: 'base2', value: 10},
  {name: 'base2', value: 6},
  {name: 'base3', value: 2},
  {name: 'base2', value: 2},
  {name: 'base1', value: 10},
  {name: 'base2', value: 5},
  {name: 'base2', value: 9},
  {name: 'base2', value: 7},
  {name: 'base2', value: 3},
  {name: 'base1', value: 4},
  {name: 'base1', value: 5},
  {name: 'base3', value: 7}
];
</script>

赞(0）回复(0）举报 2023-03-05

我来回答

将CSV文件中列出的重复名称分组，并使用d3.js在单独的Div中显示每组的总数

1条答案

相关问题

热门标签

最新问答