为什么条形的颜色不填充并保持白色?D3JS

Question

条形显示数字和高度，但我无法用任何东西以某种原因更改栏的颜色，而我的风格标签上则说明了它的红色在代码中，填充说是红色的，我不明白为什么它是白色而不是变成红色的？

 var dataset = [80, 100, 56, 120, 180, 30, 40, 120, 160];
 var svgWidth = 500, svgHeight = 300, barPadding = 5;
 var barWidth = svgWidth / dataset.length;
 var svg = d3.select('svg')
.attr("width", svgWidth)
.attr("height", svgHeight);
 var barChart = svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("y", function (d) {
    return svgHeight -d;
})
.attr("height", function (d) {
    return d;
})
.attr("wdith", barWidth - barPadding)
.attr("class", "bar")
.attr("fill", "red")
.attr("transform", function (d, i) {
    var translate = [barWidth * i, 0];
    return "translate("+ translate +")";
});
 var text = svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function (d) {
    return d;
})
.attr("y", function (d, i) {
    return svgHeight - d - 2;
})
.attr("x", function(d, i){
    return barWidth * i;
})
.attr("fill","#A64C38");

.bar {
color: red;
background-color: red;
}

<script src="https://d3js.org/d3.v5.js"></script>
<script src="main.js"></script>
<svg class="bar-chart"></svg>

Answer 1

给出rect A width，也许x不是transform

Answer 2

唯一的问题是拼写错误的"宽度"属性。如上所述。这是完整的固定代码。您甚至不需要指定类和CSS。SVG RECT填充属性应该能够给您您想要的颜色。

 var dataset = [80, 100, 56, 120, 180, 30, 40, 120, 160];
 var svgWidth = 500, svgHeight = 300, barPadding = 5;
 var barWidth = svgWidth / dataset.length;
 var svg = d3.select('svg')
.attr("width", svgWidth)
.attr("height", svgHeight);
 var barChart = svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("y", function (d) {
    return svgHeight -d;
})
.attr("height", function (d) {
    return d;
})
.attr("width", barWidth - barPadding)
.attr("class", "bar")
.attr("fill", "red")
.attr("transform", function (d, i) {
    var translate = [barWidth * i, 0];
    return "translate("+ translate +")";
});
 var text = svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function (d) {
    return d;
})
.attr("y", function (d, i) {
    return svgHeight - d - 2;
})
.attr("x", function(d, i){
    return barWidth * i;
})
.attr("fill","#A64C38");

<script src="https://d3js.org/d3.v5.js"></script>
<script src="main.js"></script>
<svg class="bar-chart"></svg>