Javascript 下拉选择后条形图未更新-d3.js_Javascript_D3.js

Javascript 下拉选择后条形图未更新-d3.js

javascript d3.js

Javascript 下拉选择后条形图未更新-d3.js,javascript,d3.js,Javascript,D3.js,一般来说，我对d3.js和javascript都是新手，我不知道为什么我的图表在做出下拉选择后没有改变。我相信在下拉选择中选择的值没有达到更新功能。感谢您的帮助。先谢谢你 html文件： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>D3 chart bar with drop down menu<

一般来说，我对d3.js和javascript都是新手，我不知道为什么我的图表在做出下拉选择后没有改变。我相信在下拉选择中选择的值没有达到更新功能。感谢您的帮助。先谢谢你

html文件：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>D3 chart bar with drop down menu</title>
        <script type="text/javascript" src="https://d3js.org/d3.v5.min.js"></script>
        <style type="text/css">
        </style>
    </head>
    <body>
        <div id = "container">
                <div id = "dropdown"></div>
                <div id = "graph"></div>
                <script src ="bar.js"></script>
        </div>
    </body>
</html>

数据：

***更新：已解决*** 好吧，所以我坚持下去，抓住了错误

这个街区

var unitMenu = d3.select("#dropdown")
.append("select")
.selectAll("option")
    .data(unitOptions)
    .enter()
    .append("option")
    .attr("value", (d) => {return d;})
    .text((d) => {return d;});

应该是

var unitMenu = d3.select("#dropdown")

unitMenu.append("select")
    .selectAll("option")
        .data(unitOptions)
        .enter()
        .append("option")
        .attr("value", (d) => {return d;})
        .text((d) => {return d;});

尽管如此，我还是会投票并检查解释为什么会出现这种情况的答案。。。谢谢

您的修复程序起作用的原因如下：

unitMenu.on('change', function() {

    // find which unit was selected from the dropdown
    var selectedUnit = d3.select(this)
        .select("select")
        .property("value");

    // run update with selected unit
    updateGraph(selectedUnit);

});

您正在将更改事件侦听器附加到包含更正版本中的下拉列表的整个div，而之前，它是从数据绑定调用附加到enter选择，这是select中的选项元素数组。当您在下拉列表中选择不同的元素时，这些项目不会触发更改事件。即使他们这样做了，该代码：

    var selectedUnit = d3.select(this)
        .select("select")
        .property("value");

正在搜索此中的select元素，对于事件侦听器，该元素是触发事件的元素。如果这是选项元素，则在其中找不到select元素

您还可以通过将select元素指定给unitMenu，然后更改处理事件的代码来生成工作代码：

var unitMenu = d3.select("#dropdown")
.append("select");

unitMenu
.selectAll("option")
    .data(unitOptions)
    .enter()
    .append("option")
    .attr("value", (d) => {return d;})
    .text((d) => {return d;});

[...]

unitMenu.on('change', function() {
    var selectedUnit = d3.select(this)  // this is the select element
        .property("value");

    updateGraph(selectedUnit);
});

谢谢你的提醒。所以问题是，这个在变更事件监听器中被附加到附加元素选项，该选项在var unitMenu=。。。前面挡。通过修复，选项现在在var语句之外使用，这意味着该选项不是原始对象var unitMenu的一部分。在事件侦听器上下文中，使用它将引用var unitMenu=..中最内部的附加元素。。。。这就是var unitMenu=d3…appendselect工作的原因，因为元素select发生了变化。再次感谢。。

    var selectedUnit = d3.select(this)
        .select("select")
        .property("value");

var unitMenu = d3.select("#dropdown")
.append("select");

unitMenu
.selectAll("option")
    .data(unitOptions)
    .enter()
    .append("option")
    .attr("value", (d) => {return d;})
    .text((d) => {return d;});

[...]

unitMenu.on('change', function() {
    var selectedUnit = d3.select(this)  // this is the select element
        .property("value");

    updateGraph(selectedUnit);
});