Javascript D3-带正负值的图表

我正试图用下面的正负数值来构建d3图表

---

我找到了一些和的例子。我面临着定制它的困难，因为我以前没有d3的经验，我认为它需要一些时间来学习。我也试过了。创建了一些简单的图表示例，但无法实现上述功能。所以我想寻求帮助。如果有人已经做过类似的图表，或者提供了一些指导，也许他们可以帮上忙。提前感谢。

第一步是确定如何简化此图表。删除功能，直到保留最基本的功能为止。然后，构建它并逐渐添加功能，直到它与您想要的相似

在您的情况下，这将是一个水平条形图。然后，添加一些负值和一条居中的零线。最后，降低条的高度，使其成为节点，并添加文本

我将尝试在这些步骤中添加类似的内容，不包括布局和所有内容，但希望您能够看到我的逻辑

基本垂直条形图

//一些假数据
const data=['SaaS'，'Sales'，'Fruits&vegies'，'IT'].map（（v，i）=>({
姓名:v,，
值：3*i+2
}));
常数宽度=600，
高度=300
保证金={
前20名，
左:100,，
右:40,，
底数：40
};
//处理它以查找x轴和y轴域
//scaleLinear，因为它考虑数字
常数x=d3.scaleLinear（）
.domain（[0，d3.max（data.map（d=>d.value））]）//可能的值
.范围（[0，宽度]；//可用屏幕空间
//缩放区，因为它只是分类数据
常量y=d3.scaleBand（）
.domain（data.map（d=>d.name））//所有可能的值
.range（[height，0]）//有点奇怪，y轴总是向后的，因为（0,0）是左上角
.填充（0.1）；
const svg=d3.select（'svg'）
.attr（'width'，width+margin.left+margin.right）
.attr（'height'，height+margin.top+margin.bottom）；
常数g=svg
//附加一个容器元素。这将保持图表
.append（'g'）
//稍微移动它，以考虑轴和标签
.attr（'transform'，'translate（${margin.left}${margin.right}）`）；
//划清界限
//首先，将数据分配给条形图对象，这将决定删除、更新和添加哪些对象
常量条=g.append（'g'）
.selectAll（'rect'）
.数据（数据）；
//良好实践：在添加内容之前始终调用remove
bar.exit（）.remove（）；
//添加新条并指定不依赖于数据的任何属性
//例如，文本的字体
输入（）
.append（'rect'）
.attr（'fill'，'steelblue'）
//现在将其与现有的条合并
.合并（条）
//从现在起，我们经营新旧酒吧
//酒吧很奇怪，首先我们要定位每个酒吧的左上角
.attr（'x'，0）
.attr（'y'，d=>y（d.name））
//然后我们确定宽度和高度
.attr（'width'，d=>x（d.value））
.attr（'高度'，y.带宽（））
//绘制x轴和y轴
g、 附加（'g'）
.classed（'x轴'，真）
.attr（'transform'，'translate（0，${height}）`）
.call（d3.axisBottom（x））
g、 附加（'g'）
.classed（'y轴'，真）
.call（d3.axisLeft（y））

---

第一步是确定如何简化此图表。删除功能，直到保留最基本的功能为止。然后，构建它并逐渐添加功能，直到它与您想要的相似

在您的情况下，这将是一个水平条形图。然后，添加一些负值和一条居中的零线。最后，降低条的高度，使其成为节点，并添加文本

我将尝试在这些步骤中添加类似的内容，不包括布局和所有内容，但希望您能够看到我的逻辑

基本垂直条形图

//一些假数据
const data=['SaaS'，'Sales'，'Fruits&vegies'，'IT'].map（（v，i）=>({
姓名:v,，
值：3*i+2
}));
常数宽度=600，
高度=300
保证金={
前20名，
左:100,，
右:40,，
底数：40
};
//处理它以查找x轴和y轴域
//scaleLinear，因为它考虑数字
常数x=d3.scaleLinear（）
.domain（[0，d3.max（data.map（d=>d.value））]）//可能的值
.范围（[0，宽度]；//可用屏幕空间
//缩放区，因为它只是分类数据
常量y=d3.scaleBand（）
.domain（data.map（d=>d.name））//所有可能的值
.range（[height，0]）//有点奇怪，y轴总是向后的，因为（0,0）是左上角
.填充（0.1）；
const svg=d3.select（'svg'）
.attr（'width'，width+margin.left+margin.right）
.attr（'height'，height+margin.top+margin.bottom）；
常数g=svg
//附加一个容器元素。这将保持图表
.append（'g'）
//稍微移动它，以考虑轴和标签
.attr（'transform'，'translate（${margin.left}${margin.right}）`）；
//划清界限
//首先，将数据分配给条形图对象，这将决定删除、更新和添加哪些对象
常量条=g.append（'g'）
.selectAll（'rect'）
.数据（数据）；
//良好实践：在添加内容之前始终调用remove
bar.exit（）.remove（）；
//添加新条并指定不依赖于数据的任何属性
//例如，文本的字体
输入（）
.append（'rect'）
.attr（'fill'，'steelblue'）
//现在将其与现有的条合并
.合并（条）
//从现在起，我们经营新旧酒吧
//酒吧很奇怪，首先我们要定位每个酒吧的左上角
.attr（'x'，0）
.attr（'y'，d=>y（d.name））
//然后我们确定宽度和高度
.attr（'width'，d=>x（d.value））
.attr（'高度'，y.带宽（））
//绘制x轴和y轴
g、 附加（'g'）
.classed（'x轴'，真）
.attr（'transform'，'translate（0，${height}）`）
.call（d3.axisBottom（x））
g、 附加（'g'）
.classed（'y轴'，真）
.call（d3.axisLeft（y））