时间戳

首页 > 解决方案 > 如何在 D3 v6 中将 scaleBand.domain() 用于离散数据而不对数据进行硬编码？

javascript - 如何在 D3 v6 中将 scaleBand.domain() 用于离散数据而不对数据进行硬编码？

问题描述

我正在尝试创建一个条形图来比较全球食物浪费。我正在使用格式如下的 CSV 文件：

Countries,Household_Food_Waste
Australia,102
Austria,39
Denmark,81
Netherlands,50
New Zealand,61
Norway,79
Sweden,81
United Kingdom,77
United States of America,59
China,64
Japan,64
Poland,56
Russian Federation,33
Finland,65
Italy,67
France,85
Belgium,50

但是，当我尝试为国家/地区的数据创建 xScale 时，我不确定应该为域值添加什么：

var xScale = d3.scaleBand()
               .domain()
               .rangeRound([padding ,width])
               .paddingInner(0.05);

到目前为止，我找到的所有解决方案都要求我对所有国家/地区的名称进行硬编码，这在这种情况下非常乏味。

在这种情况下，有没有人有没有硬编码的域解决方案？

谢谢！

标签： javascriptd3.jsdata-visualization

解决方案

如果您将 CSV 作为数组，则可以通过以下方式获取国家/地区

const countries = myArray.map(obj => obj.Countries)

然后将其传递到域中

const csv = `Countries,Household_Food_Waste
Australia,102
Austria,39
Denmark,81
Netherlands,50
New Zealand,61
Norway,79
Sweden,81
United Kingdom,77
United States of America,59
China,64
Japan,64
Poland,56
Russian Federation,33
Finland,65
Italy,67
France,85
Belgium,50`;

const myArray = d3.csvParse(csv);

const countries = myArray.map(obj => obj.Countries);

console.log(countries);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

推荐阅读