显示查询D3的某些数据 [英] Displaying certain data that of a query D3

问题描述

我有多个CSV文件，如下所示:

I have multiple CSV files that looks like this:

name,state,x,y
Anderson,VIC,34,765
Martin,VIC,55,345
James,NSW,46,129
Zoe,QLD,63,76

我正在使用带有条形图的此数据，并将其装入以便显示所有数据.我目前正在想一个想法，当用户单击下拉菜单时，只会显示某些值.例如，如果他们单击VIC，则仅显示状态为VIC的数据.但是我对如何分离这样的数据感到困惑?我以为下面的代码可以工作，但不能:

I'm using this data with a barchart, and have it loaded in so that all data is shown. I'm currently toying with the idea of when a user clicks a dropdown menu, only certain values will show. For example, if they click VIC, only data with a state of VIC will be shown. But I'm confused about how I can segregate the data like that? I thought my code below would work, but it doesn't:

svg.selectAll("mybar")
  .data(data, function(d) { return d.state["vic"];})
  .enter()
  .append("rect")
    .attr("x", function(d) { return x(d.x); })
    .attr("y", function(d) { return y(d.y); })
    .attr("width", x.bandwidth())
    .attr("height", function(d) { return height - y(d.y); })
    .attr("fill", "blue")

理想的输出是return d.state["..."];根据在下拉菜单中选择的状态进行更新.

The ideal output is that return d.state["..."]; is updated depending on the state that has been selected in the dropdown menu.

推荐答案

您必须添加带有类似数据的过滤器.

You must have to add filter with data like.

data.filter(function(d){
            return d.category == category;
        })

AS

d3.select("body")
    .selectAll("div.h-bar")
    .data(data.filter(function(d){
        return d.category == category;
    }))
    .select("span")
    .text(function (d) {
        return d.category;
    });

这是工作示例 https://bl.ocks.org/fabiomainardi/00fd581dc5ba92d99eec

这篇关于显示查询D3的某些数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！