如何使用 d3.js 按 "thrid" 值过滤条形图

Question

我能够使用 D3.js 版本 7 绘制一个非常简单的条形图，该条形图将名称与数据集中的点相关联。在同一个数据集中，我想使用第三个值来过滤条形图。

我可以通过 name 或 points 过滤它，只需使用：

.filter((d) => d.name = "OneA")
.filter((d) => d.points > 100000)

但是，如果我尝试按 status 过滤条形图数据，则它不起作用。未过滤任何内容。

这是完整的代码：

// 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"
    }
]

在这种情况下如何按状态过滤条形图？

Answer 1

您应该将过滤语句中的值与“==”（双等号）进行比较

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")

如何使用 d3.js 按 "thrid" 值过滤条形图

How to filter a barchart by a "thrid" value using d3.js

javascript

d3.js