Javascript D3.js V5-为什么我的条形图轴没有缩放？

我正在使用以下数据在D3中制作条形图： [-76、-55、-51、-44、-35、27]

Y轴应该从-100到100

代码如下：

var data = [-76, -55, -51, -44, -35, 27];

var leftMargin = 50;  // Space to the left of first bar; accomodates y-axis labels
var rightMargin = 10; // Space to the right of last bar
var margin = {left: leftMargin, right: rightMargin, top: 10, bottom: 10};
var barWidth = 30;  // Width of the bars
var chartHeight = height;  // Height of chart, from x-axis (ie. y=0)
var chartWidth = margin.left + data.length * barWidth + margin.right;

/* This scale produces negative output for negatve input */
var yScale = d3.scaleLinear()
  .domain([0, d3.max(data)])
  .range([0, chartHeight]);

/*
 * We need a different scale for drawing the y-axis. It needs
 * a reversed range, and a larger domain to accomodate negaive values.
 */
var yAxisScale = d3.scaleLinear()
  .domain([-100, 100])
  .range([chartHeight - yScale(d3.min(data)), 0 ]);

svg2
  .attr('height', chartHeight + 100)
  .attr('width', chartWidth)
  .style('border', '1px solid');

svg2
  .selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("x", function(d, i) { return margin.left + i * barWidth; })
  .attr("y", function(d, i) { return chartHeight - Math.max(0, yScale(d));})
  .attr("height", function(d) { return Math.abs(yScale(d)); })
  .attr("width", barWidth)
  .style("fill", "grey")
  .style("stroke", "black")
  .style("stroke-width", "1px")
  .style("opacity", function(d, i) { return 1 /*- (i * (1/data.length)); */});

var yAxis = d3.axisLeft(yAxisScale);

svg2.append('g')
  .attr('transform', function(d) {
    return 'translate(' + margin.left + ', 0)';
  })
  .call(yAxis);

这是输出的图表-如您所见，比例已关闭，图像未缩放到SVG容器-负栏超出了SVG的底部

有人能帮我把这个条形图格式化吗

/* *我们需要不同的比例来绘制y轴。它需要 *一个反向范围和一个更大的域来容纳负值。 */

这是不必要的，会造成更多的复杂性。一个刻度就足够了，它将始终使数据与轴匹配。一旦为绘制的轴和数据创建不同的比例，就会发现两者之间存在更大的冲突

相反，让我们在这里创建一个比例，

yScale

：

var yScale = d3.scaleLinear()
   .domain([-100,100])  // min & max of input values
   .range([chartHeight,0]) // mapped to the bottom and top of the plot area

对于0以下的值，负条形图，条形图顶部将位于

yScale（0）

。rect的底部将位于

yScale（value）

。两者之间的差值（高度）将等于

yScale（值）-yScale（0）

对于大于0的值，条形图的底部将位于

yScale（0）

，顶部将位于

yScale（value）

。要查找高度，我们使用

yScale（0）-yScale（值）

由于高度只是

yScale（0）

和

yScale（值）

之间的绝对差，我们可以使用

Math.abs（yScale（0）-yScale（值））

来查找所有矩形的高度

考虑到上述内容，我重新构建了您的示例代码：

var数据=[-76，-55，-51，-44，-35,27]；
var高度=250；
var宽度=500；
var-margin={左：50，右：10，上：20，下：20}；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（'height'，height）
.attr（'width'，width）
.style（'border'，'1px solid'）
.附加（“g”）
//应用边距：
.attr（“transform”、“translate”（++[margin.left+”，“+margin.top]+”）；
var barWidth=30；//钢筋宽度
//绘图区域为高度-垂直边距。
var chartHeight=高度-边距.top-margin.left；
//设置比例：
var yScale=d3.scaleLinear（）
.domain（[-100100]）
.范围（[chartHeight，0]）；
//绘制一些矩形：
svg
.selectAll（“rect”）
.数据（数据）
.输入（）
.append（“rect”）
.attr（“x”，函数（d，i）{return i*barWidth；}）
.attr（“y”，函数（d，i）{
if（d<0）{
返回yScale（0）；//如果值小于零，则条的顶部位于yScale（0）；
}
否则{
返回yScale（d）；//否则矩形的顶部在yScale（d）处高于yScale（0）；
}
})
.attr（“高度”，功能（d）{
//矩形的高度是比例值和yScale（0）之间的差值；
返回Math.abs（yScale（0）-yScale（d））；
}) 
.attr（“宽度”，barWidth）
.样式（“填充”、“灰色”）
.style（“笔划”、“黑色”）
.style（“笔划宽度”、“1px”）
var yAxis=d3.轴左（yScale）；
append（'g'）
.呼叫（yAxis）