Question

我已经创建了条形图的一般视图。现在，我试图添加一个下拉菜单，以根据选择来查看更多详细信息。

现在，条形图显示了本科生和研究生的薪水。我想分别显示本科和研究生的类型。

我使用以下命令完成了HTML代码部分：

    <select id="SelectType">
    <option value="0">All Graduate Type</option>
    <option value="1">Undergraduate</option>
    <option value="2">Postgraduate</option>
    </select>

在js文件中，我的代码是：

var SelectType = document.getElementById("SelectType").value;  

if (SelectType = 0) { Select = 0 }
else if (SelectType = 1) { Select = 1 }
else if (SelectType = 2) { Select = 2 }

我的想法是获取SelectType值，然后显示相应的条形图。但是我发现我无法使用“如果没有”来实现它。 “类型”是原始文件中的属性之一。现在，条形图一起显示了所有“类型”。

我显示条形图总体视图的代码是

d3.csv("Median Salary Integration 2018.csv")

var barChart = svgCanvas.selectAll("rect")
            .data(Dataset)
            .enter()
            .append("rect")
            .attr("width", 6)
            .attr("height", 0)
            .attr("x", function (d, i) { return xScale(i) + 45 })
            .attr("y", 500)
            .attr("fill", function (d, i) {return colors(i)
            })

我不确定如何使用change（）函数？（在上一篇文章中查看）

请帮我弄清楚。非常感谢！

条形图更改基于下拉菜单选择

0 个答案: