我正在使用d3库显示条形图，每个条形具有不同的颜色。这是我的代码-
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.chart div {
font: 10px sans-serif;
background-color: steelblue;
text-align: right;
padding: 3px;
margin: 1px;
color: white;
}
</style>
<div class="chart"></div>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var data = [{"label":"Recommended", "value":60},{"label":" You", "value":60},{"label":"Peers","value":40}];
var color = d3.scale.ordinal().range(["#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
var x = d3.scale.linear()
.domain([0, d3.max(data)])
.range([0, 420]);
d3.select(".chart")
.selectAll("div")
.data(data)
.enter().append("div")
// .attr("width",400)
// .attr("depth",400)
.style("width", function(d) { return d.value + "px"; })
// .style("fill", function(d,i) { return data[i].color;})
.text(function(d,i) { return data[i].label; });
</script>
我无法为每个酒吧获得不同的颜色。谁能帮我解决这个问题。
您正在修改fill样式，但是您有div元素，因此需要background-color属性。
另外，您应该将color刻度范围用作函数以获得正确的结果。
var data = [{
"label": "Recommended",
"value": 60
}, {
"label": " You",
"value": 60
}, {
"label": "Peers",
"value": 40
}];
var color = d3.scale.ordinal().range(["#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
var x = d3.scale.linear()
.domain([0, d3.max(data)])
.range([0, 420]);
d3.select(".chart")
.selectAll("div")
.data(data)
.enter().append("div")
// .attr("width",400)
// .attr("depth",400)
.style("width", function(d) {
return d.value + "px";
})
.style("background-color", function(d, i) {
return color(i);
})
.text(function(d, i) {
return data[i].label;
});.chart div {
font: 10px sans-serif;
text-align: right;
padding: 3px;
margin: 1px;
color: white;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.0/d3.min.js"></script>
<div class="chart"></div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句