Javascript 为什么条形图显示为“带”；反向值“；？d3.js

我正在尝试学习如何在react中使用d3.js，但我的代码中出现了一些错误

我正在做一个条形图，但条形图的值是“反向的”，例如，一个条形图的值是30%，但在图表中，条形图显示为70%（比如，100%-30%=70%）。 我如何解决这个问题？

这是我的密码：

我的另一个问题是：如何更改条的高度？我想添加一些边距顶部以显示y轴的所有内容，但如果这样做，条仍然具有相同的高度，并且与yAxis值不匹配

svg
      .selectAll("rect")
      .data(data)
      .enter()
      .append("rect")
      .attr("x", d => xScale(d.year))
      .attr("y", d => height - yScale(100-d.percent))
      .attr("width", xScale.bandwidth())
      .attr("height", d => yScale(100-d.percent))
      .attr("fill", "steelblue")
      .attr("transform", `translate(${margin.left}, -${margin.bottom})`);

你需要从100减去百分比

---

工作：

这里的问题是您正在交换

y

和

height

逻辑，它应该是：

.attr("y", d => yScale(d.percent))
.attr("height", d => height - margin.bottom - margin.top - yScale(d.percent)) 

或者，如果您将工作高度设置为

height = totalHeight - margin.bottom - margin.top

。。。它可以是：

.attr("y", d => yScale(d.percent))
.attr("height", d => height - yScale(d.percent)) 

最重要的是（这解决了你的第二个问题），你用的是博斯托克的错误。您应该根据页边距翻译

g

组，然后将所有条添加到翻译后的组中，而无需再次翻译。另外，将轴的组附加到该

g

组

话虽如此，但这些变化的代码如下：

const数据=[{
年份：2012年，
百分比：50
},
{
年份：2013年，
百分比：30
},
{
年份：2014年，
百分比：90
},
{
年份：2015年，
百分比：60
},
{
年份：2016年，
百分比：75
},
{
年份：2017年，
百分比：20
}
];
常数高度=300；
常数宽度=370；
常量边距={
前20名，
右:10,，
底数：20，
左：25
};
常量xScale=d3.scaleBand（）
.domain（data.map（d=>d.year））
.填充（0.2）
.范围（[0，宽度-边距.右侧-边距.左侧]）；
常数yScale=d3
.scaleLinear（）
.domain（[01100]）
.范围（[height-margin.bottom-margin.top，0]）；
常量svg=d3
.选择（“正文”）
.append（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.样式（“左边距”，10）；
常数g=svg
.附加（“g”）
.attr（“transform”，`translate（${margin.left}，${margin.top}）`）；
G
.selectAll（“rect”）
.数据（数据）
.输入（）
.append（“rect”）
.attr（“x”，d=>xScale（d.year））
.attr（“y”，d=>yScale（d.percent））
.attr（“宽度”，xScale.bandwidth（））
.attr（“高度”，d=>height-margin.bottom-margin.top-yScale（d.percent））
.attr（“填充”、“钢蓝”）
g、 附加（“g”）
.call（d3.axisLeft（yScale））；
g、 附加（“g”）
.call（d3.axisBottom（xScale））
艾特先生(
“转化”，
`平移（0，${height-margin.bottom-margin.top}）`
);
谢谢，你可以帮我回答两个问题吗？是的，告诉我，上面的解决方案对你有效。请接受答案。第二个是问题。你的意思是100在顶部切割，你想解决这个问题吗？可以将宽度更改为100%？