为什么条的颜色没有填充并保持白色？ d3js答案

【问题标题】：Why is the color of the bars not filling and staying white? d3js为什么条的颜色没有填充并保持白色？ d3js
【发布时间】：2019-02-24 13:09:12
【问题描述】：

条形图正确显示了数字和高度，但由于某种原因，我无法更改条形图的颜色，因为它保持白色，而样式标签中的 .bar 显示为红色，代码中的填充显示为它是红色的，我不明白为什么它是白色的而不是变红？

 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>

【问题讨论】：

你拼错了宽度属性.attr("wdith", barWidth - barPadding) 应该是.attr("width", barWidth - barPadding) 如果你修复它工作正常。

标签： javascript html css d3.js

【解决方案1】：

给rect 一个width，也许是一个x 而不是transform

【讨论】：

【解决方案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>

【讨论】：