Javascript 创建d3条形图

我有一个csv文件，其中包含Spotify 2010-2019年的热门歌曲。每首歌曲的属性都有类型、艺术家、年份、流行度、bpm等。我想创建一个条形图，该条形图的x轴为年份，y轴为流行度，然后每个类型在图表上代表一个不同的颜色条。我已附上我正在使用的csv文件，如有任何帮助，将不胜感激

链接到csv:

---

我假设您正在寻找堆叠的钢筋，但如果没有，则不堆叠将是更容易的方法。以此为基础，我们需要首先转换数据，以表示您在文章中描述的配置。基本上，我们需要按

年

，

类型

进行分组，并以适合堆叠的方式进行转换。例如像这样的事情

const数据=[
{月份：新日期（2015，0，1），苹果：3840，香蕉：1920，樱桃：960，日期：400}，
];

或者如果你的数据是这样的

const数据=[
{年份：2015年，genre1:popularity1，genre2:popularity1，…剩余}，
];

幸运的是，

d3

为我们提供了大量的数据

注意：我在下面的代码中使用的是D3V6而不是v4（如示例），API略有不同，但基本上是相同的概念

我创建了以下工作片段供您查看。我曾经用上面描述的方式对数据进行分组。我建议您记录每个转换，以查看新结构的外观。如果每年每个流派有超过一首歌曲，我会考虑它的受欢迎程度。一旦你有了上面定义的形状的结构，我们将其传递给格式化数据，为每个系列（又名组或类型）设置正确的

y0

和

y1

值

最后，通过将堆叠数据集添加到基本示例中的渲染逻辑中，并进行一些调整，可以得到如下结果。很抱歉，它有点未完成，但这应该为您提供一个良好的迭代起点

const svg=d3.选择（“svg”），
保证金={
前20名，
右:20,，
底数：30，
左：40
},
宽度=+svg.attr（“宽度”）-margin.left-margin.right，
高度=+svg.attr（“高度”）-margin.top-margin.bottom，
g=svg.append（“g”）.attr（“transform”、“translate”（+margin.left+）、“+margin.top+”）；
//设置x、y和颜色
常量x=d3.scaleBand（）
.rangeRound（[10，宽度-10]）
.填充（0.2）
常数y=d3.scaleLinear（）
.范围（[高度，0]）；
常数z=d3.scaleOrdinal（d3.schemePaired）；
d3.csv（'https://raw.githubusercontent.com/moonpieluvincutie/Spotify/main/top10s%20（版本%201）.xlsb.csv'，（d）=>({
年份：+d.year，
流行音乐：d.pop，
流派：d[“顶级流派”]，
}))。然后（（数据）=>{
//将数据按类别和年份分组
constgroupeddataset=d3.rollups（数据，v=>d3.mean（v，d=>d.pop），d=>d.year，d=>d.groups）
const flattedDataset=groupedDataset.map（[year，values]）=>{
返回{
年，
…值.reduce（（acc，[流派，流行]）=>{
acc[流派]=流行音乐；
返回acc；
}, {}),
}
});
const-genres=d3.rollups（数据，（）=>null，d=>d.genre）.map（（[genre]）=>genre）；
//堆栈分组数据
常量数据集=d3.stack（）
.keys（类型）
.值（（d，键）=>d[键]？？0）
.订单（d3.stackOrderNone）
.偏移量（d3.stackOffsetNone）
（展平数据集）
//分配x、y和z（又名流派组）域
x、 域（groupedDataset.map（（[year]）=>year））；
y、 域（[0，d3.max(
数据集，（d）=>{
返回d3.max（d，（[y]）=>y）
}
)]).nice（）；
z、 领域（体裁）；
常量yAxis=d3.axisLeft（）
.比例（y）
.滴答声（5）
.tickSize（-width，0，0）
.tickFormat（（d）=>{return d}）；
const xAxis=d3.axisBottom（）
.比例（x）
g、 附加（“g”）
.全选（“g”）
.数据（数据集）
.enter（）.append（“g”）
.attr（“填充”（d）=>z（d键））
.selectAll（“rect”）
.数据（（d）=>d）
.enter（）.append（“rect”）
.attr（“x”，（d）=>x（+d.数据年））
.attr（“y”，（d）=>y（d[1]））
.attr（“高度”，（d）=>y（d[0]）-y（d[1]））
.attr（“宽度”，x.带宽（））；
g、 附加（“g”）
.attr（“类”、“轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）；
g、 附加（“g”）
.attr（“类”、“轴”）
.呼叫（yAxis）
.append（“文本”）
.attr（“x”，2）
.attr（“y”，y（y.ticks（）.pop（））+0.5）
.attr（“dy”，“0.32em”）
.attr（“填充”、“千”）
.attr（“字体大小”、“粗体”）
.attr（“文本锚定”、“开始”）
.文本（“流行”）；
常量图例=g.append（“g”）
.attr（“字体系列”、“无衬线”）
.attr（“字体大小”，10）
.attr（“文本锚定”、“结束”）
.全选（“g”）
.data（genres.slice（）.reverse（））
.enter（）.append（“g”）
.attr（“转换”（transform），（d，i）=>“转换（0，+i*20+）”）；
图例。追加（“rect”）
.attr（“x”，宽度-19）
.attr（“宽度”，19）
.attr（“高度”，19）
.attr（“填充”，z）；
图例。追加（“文本”）
.attr（“x”，宽度-24）
.attr（“y”，9.5）
.attr（“dy”，“0.32em”）
.文本（（d）=>d）；
})

.axis.domain{
显示：无；
}

使用D3堆叠条形图：非常感谢！您解释每个步骤的方式对理解流程非常有帮助。我刚刚在学习d3，这非常有用，我很感激。我只是想澄清一下，在你给我的例子中，我需要如何按年份和类型对我的数据进行分组。我会写下每首歌的年份、流派和流行度得分？我不确定我评论时你是否收到通知，或者我是否必须标记你，所以我会同时做这两件事。我道歉@NickofthymeNo担心，是的，你会收到关于帖子评论的通知。不确定您要问什么，但这实际上取决于您希望如何可视化数据。你可以将所有歌曲按流派分组，然后按年份分组，然后像我在示例中所做的那样取平均值，然后在工具提示中列出所有歌曲。或者，您可以将所有歌曲渲染为