Fatal编程技术网
  • javascript/
  • Javascript 下拉列表更改时无法清除d3.js div

Javascript 下拉列表更改时无法清除d3.js div

javascript d3.js

Javascript 下拉列表更改时无法清除d3.js div,javascript,d3.js,Javascript,D3.js,我正在使用d3.js创建一些表，这些表是根据用户选择的下拉选项填充的，该选项过滤数据。这很好。 我正在给表格添加脚注。我遇到的问题是，当下拉列表更改时，脚注div不清楚。所以当你选择“A部分”时，你会看到脚注A，b，c。然后，当您选择“第B节”时，脚注d将附加到这些部分。我只想看到那个场景中的脚注d 我添加了d3.select（“#脚注”）.remove（）； 上面是创建脚注的地方，但这不起作用。 在下拉列表中创建脚注div之前，如何清除脚注div 这是一个扑克牌： 代码如下： <!DO

我正在使用d3.js创建一些表，这些表是根据用户选择的下拉选项填充的，该选项过滤数据。这很好。 我正在给表格添加脚注。我遇到的问题是，当下拉列表更改时，脚注div不清楚。所以当你选择“A部分”时，你会看到脚注A，b，c。然后，当您选择“第B节”时，脚注d将附加到这些部分。我只想看到那个场景中的脚注d

我添加了d3.select（“#脚注”）.remove（）； 上面是创建脚注的地方，但这不起作用。 在下拉列表中创建脚注div之前，如何清除脚注div

这是一个扑克牌：

代码如下：

<!DOCTYPE html>
    <html>
    <head>
        <style>
            body{
                font-family:Arial, sans-serif;
                font-size:14px;
            }
            table{
                border-spacing:0;
                padding:0;
            }
            th{
              text-align:left;
              font-weight:normal !important;
              border-top:1px solid #ddd;
              border-left:1px solid #ddd;
              border-bottom:1px solid #ddd;
                height:25px;
                padding-left:5px;
                width: 50px;
            }
            td{
              border:1px solid #ddd;
                width:30px !important;
                height:25px;
                padding-left:5px;
            }
            tr.row-odd,
            .row-odd{
                background: #eee;
            }
        </style>
        <script src="http://d3js.org/d3.v3.min.js"></script>
        <script src="//code.jquery.com/jquery-1.10.2.js"></script>

    </head>
    <body>
        <select size="1" id="sections" type="select" name="style">
        <option>SELECT</option>
        <option value="a">Section A</option>
        <option value="b">Section B</option>
        </select>

        <div id="content">
        </div>

    <script>

    function filterJSON(json, key, value) {
      var result = [];
      for (var foo in json) {
        if (json[foo][key] === value) {
          result.push(json[foo]);
        }
      }

      return result;
    }

    definitions = {
        "a" : "a: footnote 1",
        "b" : "b: footnote 2",
        "c" : "c: footnote 3",
        "d" : "d: footnote 4"
    };

    var notes="";
    var added=[];

    d3.json("data3.json", function(json) {
    d3.json("footnotes.json", function(foot){
                json.forEach(function(d) {
                  d.year = +d.year;
                });

                $('#sections')

                    .on("change", function () {
                        var section = $(this).val();

                        data1 = filterJSON(json, 'set', section);
                        filterFootnotes = filterJSON(foot, 'set',  section);

                        //make an object with footnotes
                            function merge(data1, filterFootnotes) {

                                function makeObj(a) {
                                    obj[a.state] = obj[a.state] || {};
                                    obj[a.state][a.year] = obj[a.state][a.year] || {};
                                    Object.keys(a).forEach(function (k) {
                                        obj[a.state][a.year][k] = a[k];
                                    });
                                }
                                var array = [],
                                    obj = {};

                                data1.forEach(makeObj);
                                filterFootnotes.forEach(makeObj);
                                Object.keys(obj).forEach(function (k) {
                                    Object.keys(obj[k]).forEach(function (kk) {
                                        array.push(obj[k][kk]);
                                    });
                                });
                                return array;
                            }
                            var fullData = merge(data1, filterFootnotes);

                        // add years for select indicator
                        var nestyr = d3.nest()
                            .key(function(d) { return d.year; })
                            .sortKeys(d3.ascending)
                            .map(data1);

                        var yearstring = Object.keys(nestyr);

                        var tableData = [],
                            states = {};
                            fullData.forEach(function (d) {
                            var state = states[d.state];
                            if (!state) {
                                tableData.push(state = states[d.state] = {});
                                }
                                    if ( d.footnote_id ){
                                        state[d.year] = d.value + " <sup class='footnote'>" + d.footnote_id + "</sup>";
                                        if(added.indexOf(d.footnote_id)==-1){
                                          states[d.state]['footnote'] = d.footnote_id;
                                            if(undefined!=definitions[d.footnote_id]){
                                              notes+=definitions[d.footnote_id]+"<br />";
                                              added.push(d.footnote_id);
                                            }
                                            }
                                        } else{
                                            state[d.year] = d.value;
                                        }
                            states[d.state].State = d.state;
                        });

                        yearstring.unshift("State");

                        // render the table
                        tabulate(tableData, yearstring);

                        // add footnotes
                        d3.select("#footnotes").remove();
                        var fnotes = d3.selectAll('#content').append('div').attr("id", "footnotes").html(notes);

                });

                var width = 200, height = 25;
                var minInd = d3.min(json, function(d) { return d.value;} )
                var maxInd = d3.max(json, function(d) { return d.value;} )

                xScale = d3.scale.linear().range([0, width - 10]).domain(d3.extent(json, function(d) { return d.year; })),
                yScale = d3.scale.linear().range([height, 0]).domain([minInd,maxInd]),

                xAxis = d3.svg.axis().scale(xScale).tickFormat(d3.format('0f')),
                yAxis = d3.svg.axis().scale(yScale).orient("left");

        }); // close footnotes json
    }); // close json


    function tabulate(newData, columns) {

                d3.select("#table").remove();

                var table = d3.select('#content').append('table').attr("id", "table")
                var thead = table.append('thead')
                var tbody = table.append('tbody');

                thead.append('tr')
                  .selectAll('th')
                  .data(columns).enter()
                  .append('th')
                    .text(function (column) { return column; });

                var rows = tbody.selectAll('tr')
                  .data(newData)
                  .enter()
                  .append('tr');

                rows.attr("class", function(d, i){ if (i++ % 2 === 0){return 'row-even'}else {return 'row-odd'}});

                var cells = rows.selectAll('td')
                  .data(function (row) {
                    return columns.map(function (column) {
                      return {column: column, value: row[column]};
                    });
                  })
                  .enter()
                  .append('td')
                        .attr("class", function (d,i) { return columns[i]; })
                    .html(function (d) { return d.value; });

              return table;
    };
    </script>
    </body>
    </html>


身体{
字体系列：Arial，无衬线；
字体大小：14px；
}
桌子{
边界间距：0；
填充：0；
}
th{
文本对齐：左对齐；
字体大小：正常！重要；
边框顶部：1px实心#ddd；
左边框：1px实心#ddd；
边框底部：1px实心#ddd；
高度：25px；
左侧填充：5px；
宽度：50px；
}
运输署{
边框：1px实心#ddd；
宽度：30px！重要；
高度：25px；
左侧填充：5px；
}
罗奇，
.行奇数{
背景：#eee；
}
挑选
A节
B节
函数filterJSON（json、键、值）{
var结果=[]；
for（json中的var foo）{
if（json[foo][key]==值）{
push（json[foo]）；
}
}
返回结果；
}
定义={
“a”：“a：脚注1”，
“b”：“b：脚注2”，
“c”：“c：脚注3”，
“d”：“d：脚注4”
};
var注释=”；
增值=[]；
d3.json（“data3.json”，函数（json）{
d3.json（“footnotes.json”），函数（foot）{
forEach（函数（d）{
d、 年份=+d.year；
});
$（“#节”）
.on（“更改”，函数（）{
var section=$（this.val（）；
data1=filterJSON（json，'set'，section）；
filterFootnotes=filterJSON（脚，'set'，部分）；
//用脚注做成一个物体
函数合并（data1、filterFootnotes）{
函数makeObj（a）{
obj[a.state]=obj[a.state]|{}；
obj[a.state][a.year]=obj[a.state][a.year]|{}；
Object.keys（a）.forEach（函数（k）{
obj[a.state][a.year][k]=a[k]；
});
}
变量数组=[]，
obj={}；
数据1.forEach（makeObj）；
过滤食品。forEach（makeObj）；
Object.keys（obj.forEach）（函数（k）{
Object.key（obj[k]）.forEach（function（kk）{
array.push（obj[k][kk]）；
});
});
返回数组；
}
var fullData=merge（data1，filterFootnotes）；
//为选定指标添加年份
var nestyr=d3.nest（）
.key（函数（d）{返回d.year；}）
.排序键（d3.升序）
.地图（数据1）；
var yearstring=Object.keys（nestyr）；
var tableData=[]，
国家={}；
fullData.forEach（函数（d）{
var状态=状态[d.状态]；
如果（！状态）{
push（state=states[d.state]={}）；
}
如果（d.脚注){
状态[d.year]=d.value+“”+d.footnote_id+“”；
如果（添加索引of（d.脚注_id）=-1）{
州[d.state]['footnote']=d.footnote_id；
if（未定义！=定义[d.脚注\U id]）{
注释+=定义[d.脚注_id]+“
”；
添加.推送（d.脚注_id）；
}
}
}否则{
状态[d.年]=d.值；
}
states[d.state]。state=d.state；
});
年份字符串。取消移位（“状态”）；
//渲染桌子
表格（表格数据，年字符串）；
//添加脚注
d3.选择（“#脚注”）。删除（）；
var fnotes=d3.selectAll（“#content”）.append（'div'）.attr（“id”，“footnotes”）.html（注释）；
});
变量宽度=200，高度=25；
var minInd=d3.min（json，函数（d）{返回d.value；}）
var maxInd=d3.max（json，函数（d）{return d.value；}）
xScale=d3.scale.linear（）.range（[0，wid