我能夠使用 D3.js 版本 7 繪制一個非常簡單的條形圖，它將名稱與資料集中的點關聯起來。在同一個資料集中，我想使用第三個值來過濾條形圖。
我可以按名稱或點過濾它，只需使用：
.filter((d) => d.name = "OneA")
.filter((d) => d.points > 100000)
但是，如果我嘗試按狀態過濾條形圖資料，它就不起作用。什么都沒有過濾。
這是整個代碼：
// set margins, width and height
const MARGIN = { LEFT: 64, RIGHT: 2, TOP: 32, BOTTOM: 16 }
const WIDTH = 600 - MARGIN.LEFT - MARGIN.RIGHT
const HEIGHT = 400 - MARGIN.TOP - MARGIN.BOTTOM
// set svg
const svg = d3.select("#chart-area").append("svg")
.attr("width", WIDTH MARGIN.LEFT MARGIN.RIGHT)
.attr("height", HEIGHT MARGIN.TOP MARGIN.BOTTOM)
// set group
const g = svg.append("g")
.attr("transform", `translate(${MARGIN.LEFT}, ${MARGIN.TOP})`)
// import data
d3.json("data/data.json").then(data => {
// prepare data
data
.forEach(d => {
d.points = Number(d.points)
})
// set scale, domain and range for x axis
const x = d3.scaleBand()
.domain(data.map(d => d.name))
.range([0, WIDTH])
.padding(0.1)
// set scale, domain and range for y axis
const y = d3.scaleLinear()
.domain([0, d3.max(data, d => d.points)])
.range([HEIGHT, 0])
// call x axis
const xAxisCall = d3.axisBottom(x)
g.append("g")
.attr("class", "x axis")
.attr("transform", `translate(0, ${HEIGHT})`)
.call(xAxisCall)
// call y axis
const yAxisCall = d3.axisLeft(y)
g.append("g")
.attr("class", "y axis")
.call(yAxisCall)
// join data
const rects = g.selectAll("rect")
.data(data)
// enter elements to plot chart
rects.enter().append("rect")
.filter((d) => d.status = "ON") // THIS IS NOT WORKING. WHY?
.attr("x", (d) => x(d.name))
.attr("y", d => y(d.points))
.attr("width", x.bandwidth)
.attr("height", d => HEIGHT - y(d.points))
.attr("fill", "steelblue")
})
包含資料的 json 檔案是：
[
{
"name": "OneA",
"points": "492799",
"status": "ON"
},
{
"name": "TwoB",
"points": "313420",
"status": "ON"
},
{
"name": "ThreeC",
"points": "133443",
"status": "ON"
},
{
"name": "FourD",
"points": "50963",
"status": "OFF"
},
{
"name": "FiveE",
"points": "26797",
"status": "OFF"
},
{
"name": "SixF",
"points": "13483",
"status": "OFF"
},
{
"name": "SevenG",
"points": "12889",
"status": "OFF"
}
]
在這種情況下，如何按狀態過濾條形圖？
uj5u.com熱心網友回復：
您應該將過濾器陳述句中的值與“==”（雙等號）進行比較
rects.enter().append("rect")
.filter((d) => d.status == "ON") // This Should work now
.attr("x", (d) => x(d.name))
.attr("y", d => y(d.points))
.attr("width", x.bandwidth)
.attr("height", d => HEIGHT - y(d.points))
.attr("fill", "steelblue")
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/471081.html
標籤：javascript d3.js