我正在使用D3js，我有一個專案，我必須用資料圖表等對一些資料進行分類。我想做的是根據資料值對圖表的背景進行著色。 例如，一個學生的分數越多，他的圖表就會越深。 這里是我想要做的，這里是我所做的。
假設我的資料陣列是：
var students =
{"name":"John","value":"9"}。
{"name":"Jack" ,"value":"10"},
{"name":"Peter","value":"3"] 。]
這是我的script.js類，我用它來畫我的圖表：
var x = d3.scale.linear()
.range([0, width] )
.domain([0, d3.max(students, function(d) {
return d.value。
})]);
var y = d3.scale.ordinal()
.rangeRoundBands([height, 0], .1)
.domain(students.map(function (d) {
return d.name;
}));
//make y axis to show bar names[/span].
var yAxis = d3.svg.axis()
.scale(y)
//沒有刻度線。
.tickSize(0)
.orient("left") 。
var gy = svg.append("g"/span>)
.attr("class", "y軸")
.call(yAxis)
var bars = svg.selectAll(" .bar")
.data(students)
.enter()
.append("g"/span>)
//append rects。
bars.append("rect")
.attr("class"/span>, "bar")
.attr("y", function (d) {
return y（d.name）。
})
.attr("height", y.rangeBand()
.attr("x"/span>, 0)
.attr("width", function (d) {
return x（d.value）。
});
我是否可以這樣做，也許通過 "if(students.value<=10)bar.style.backgroundcolor("red") else if(students.value<=5)bar.style.backgroundcolor("pink")
uj5u.com熱心網友回復：
你可以創建一個色標并使用它來設定矩形的填充屬性。在下面的例子中，我為此使用了順序比例。
。<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">/span>
<script src="https://d3js. org/d3.v7.js"></script>
</head>
<body>
<div id="圖表"> </div>>
<script>
//圖表資料const data = [
{name: 'John', value: 80}。
{name: 'Jane', value: 85}。
{name: 'Albert', value: 56}。
{name: 'Ramson', value: 90}。
{name: 'Rick', value: 70}。
{name: 'Karen', value: 30}。
{name: 'Jaden', value: 40}。
{name: 'Gustav', value: 15}。
{name: 'Nathan', value: 95}。
].sort((a, b) => d3. descending(a.value, b.value) )。
//尺寸和邊距
const margin = { top: 10, bottom: 30, left: 30, right: 10}。
const width = 500 - margin.left - margin.right;
const height = 200 - margin.top - margin.bottom;
const svg = d3.select('#chart')
.append('svg')
.attr('width', width margin.left margin.right)
.attr('height', height margin.top margin.bottom) 。
const g = svg.append('g')
.attr('transform', `translate(${margin. left},${margin.top})`）。)
// scale
const x = d3.scaleBand()
.domain(data.map(d =>d.name)
.range([0, width] )
.padding（0.15）。
const y = d3.scaleLinear()
.domain([0, d3. max(data, d => d.value) ])
.range([height, 0] ）。)
const color = d3.scaleSequential()
.domain([0, d3. max(data, d => d.value) ])
.interpolator（d3.interpolateBlues）。
//坐標軸生成器
const xAxis = d3.axisBottom（x）。
const yAxis = d3.axisLeft（y）。
//繪制條形圖append('g'/span>)
.selectAll('rect' )
.data(data)
.join('rect')
.attr('x', d => x(d. name)
.attr('width'/span>, x.bandwidth()
.attr('y', d => y(d. value)
.attr('height', d =>高度 - y(d. value)
.attr('fill', d => color(d. value））。)
//繪制坐標軸
g.append('g'/span>)
.attr('transform', `translate(0,${height})`)
.call（xAxis）。
g.append('g'/span>)
.call（yAxis）。
</script>>
</body>
</html>/span>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/320653.html
標籤：