Javascript 如何使用D3.js在条形图中创建带值的%差异箭头线

我正在尝试创建一个条形图，其中包含一个附加功能，用于显示与连续条形图值的%差异。为了更好地理解该要求，请查看下图：

您可以看到高亮显示的箭头，该箭头显示了%的增加值。例如： （6453-5388）/5388=~20%

如何做到这一点？我正在尝试使用D3.js创建这个

我将得到如下数据：

var barData = [{
    "Year": "2019",
    "Value": 5388
},
{
    "Year": "2020",
    "Value": 6453
},
{
    "Year": "2021",
    "Value": 7345
}];

---

请帮助我提出您的宝贵建议和解决方案，以实现这一目标。

以下是基于您的数据和草图的片段。尺寸/偏移/位置是非常专有的，请根据您的设计要求进行调整

var barData=[{
“年份”：“2019年”，
“价值”：5388
},
{
“年份”：“2020年”，
“价值”：6453
},
{
“年份”：“2021年”，
“价值”：7345
}];
const svg=d3.select（'svg'）；
常量xScale=d3.scaleBand（）
.domain（barData.map（d=>d.Year））
.范围（[0240]）；
常数xAxis=d3.axisBottom（xScale）；
append（'g'）
.attr（'transform'，'translate（50170）'
.呼叫（xAxis）；
常量yScale=d3.scaleLinear（）
.domain（[0，10000]）
.范围（[150,0]）；
常数yAxis=d3.axisLeft（yScale）.ticks（4）；
append（'g'）
.attr（'transform'，'translate（50,20）`）
.呼叫（yAxis）；
const bar=svg.selectAll（'g.bar'）
.数据（barData）
.输入（）
.append（'g'）
.classed（'bar'，true）
.attr（'transform'，d=>`translate（${xScale（d.Year）+50+xScale.bandwidth（）/2}，170）`）
bar.append（'rect'）
.attr（'x'，-20）
.attr（'宽度'，40）
.attr（'y'，d=>-150+yScale（d.Value））
.attr（'height'，d=>150-yScale（d.Value））
.style（'填充'，'蓝色'）
bar.append（'text'）
.text（d=>d.Value）
.attr（'text-anchor'，'middle'）
.attr（'y'，d=>-155+yScale（d.Value））
过滤条（（d，i）=>i`M5，${-170+yScale（d.Value）}V${-210+yScale（d.Value）}H${xScale.bandwidth（）-5}V${-180+yScale（barData[i+1].Value）}`）
.style（'stroke'，'gray'）
.style（'填充'，'无'）
.attr（'marker-end'，'url（#箭头）'
过滤条（（d，i）=>i-220+yScale（d.Value））
.attr（'width'，xScale.bandwidth（）-30）
.attr（'height'，20）
.attr（'rx'，10）
.style（'填充'，'白色'）
.风格（“笔画”、“灰色”）；
过滤条（（d，i）=>i`${barData[i+1].Value>d.Value？'+'：'-'}${Math.round（（barData[i+1].Value/d.Value*100）-100）}%`）
.attr（'x'，xScale.bandwidth（）/2）
.attr（'y'，d=>-207+yScale（d.Value））
.attr（'text-anchor'，'middle'）
.样式（“填充”、“黑色”）；

文本{
字体大小：12px；
字体系列：“Ubuntu”；
}

请向我们展示您迄今为止的代码，并描述您尝试过的内容。此链接将帮助您创建一个示例：[link]@AHaworth我还没有开始创建可视化。我正在寻找一些帮助，以了解从何处开始创建酒吧是好的，我可以通过遵循D3.js网站来做到这一点，但要显示的差异%行和值是我思考的挑战领域。如果您能帮助我了解从何处开始，这将很有帮助。请提供创建条形图的代码，并确保它是一个可运行的代码段（即，您正在使用的任何库也已加载），以便我们可以查看到目前为止的情况。谢谢Michael Rovinsky，我将尝试一下，并让您知道。但是非常感谢你的帮助。嗨，迈克尔，谢谢你的帮助。我试图使代码有点动态，但我在这方面努力。请看一下JSFIDLE，我已经粘贴了我的试用代码。你的帮助真的很重要@AmitkumarSah，你能发布另一个问题并解释问题和代码片段吗？我会尝试解决@Michael:）嗨，Michael，我已经创建了另一个线程，下面是链接：