0
我正在尝试制作一个简单的Web应用程序/仪表板，其中显示了从下拉列表中选择的特定学校的简单线图。它目前的作品，，除了当您尝试切换回已经选定的学校。当发生这种情况时，该线消失。我可以将数据打印到控制台。如何在从下拉列表中选择触发时转换d3.js ver4中的线图
更一般地说，我不确定我正在构建这个最好的方法。例如，update（）函数是否应该真正包装在d3.json（）方法中？
如果它的事项，我的数据是由一个发送JsonResponse与Django视图返回的所有学校数据（即数据过滤到具体学校发生在D3，不Django的。同样，这是正确的方式？接近这一
// set the dimensions and margins of the graph
var margin = {top: 20, right: 20, bottom: 30, left: 50},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var parseDate = d3.timeParse("%Y-%y"); // for dates like "2016-17"
// set the ranges
var x = d3.scaleTime().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);
// define the line
var projection_line = d3.line()
\t .x(function(d) { return x(d.year_short_format); })
\t .y(function(d) { return y(d.projection); });
// append the svg object to the graph div
var svg = d3.select("#graph").append("svg")
\t .attr("width", width + margin.left + margin.right)
\t .attr("height", height + margin.top + margin.bottom)
\t .append("g")
\t .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// get the json url
var url = "{% url "schoolview:all_schools_enrollments_by_school_and_year" %}";
d3.json(url, function(error, dataInput) {
\t if (error) throw error;
\t // when a new school is selected, trigger update
\t d3.selectAll("#school_select").on("change", update);
\t var school_index = document.getElementById('school_select').selectedIndex;
\t var selected_school = document.getElementById('school_select')[school_index].value;
\t // filter data to the selected school
\t data = dataInput.filter(function (d) { return d.school_name == selected_school });
\t // format the data
\t data.forEach(function(d) {
\t \t d.year_short_format = parseDate(d.year_short_format);
\t });
\t // scale the domain of the data
\t x.domain(d3.extent(data, function(d) { return d.year_short_format; }));
\t y.domain([0, d3.max(data, function(d) { return d.projection; })])
\t // append the line path
\t svg.append("path")
\t \t .data([data])
\t \t .attr("class", "line")
\t \t .attr("d", projection_line)
\t // append the x-axis
\t svg.append("g")
\t \t .attr("transform", "translate(0," + height + ")")
\t \t .call(d3.axisBottom(x));
\t // append the y-axis
\t svg.append("g")
\t \t .call(d3.axisLeft(y));
\t function update() {
\t \t var school_index = document.getElementById('school_select').selectedIndex;
\t \t var selected_school = document.getElementById('school_select')[school_index].value;
\t \t // filter data to the selected school
\t \t data = dataInput.filter(function (d) { return d.school_name == selected_school });
\t \t console.log(data);
\t \t // format the data
\t \t data.forEach(function(d) {
\t \t \t d.year_short_format = parseDate(d.year_short_format);
\t \t });
\t \t var svg = d3.select("#graph").transition();
\t \t // append the line path
\t \t svg.select(".line")
\t \t \t .duration(750)
\t \t \t .attr("d", projection_line(data));
\t \t // append the x-axis
\t \t svg.select(".x.axis") // change the x axis
\t \t \t .duration(750)
\t \t \t .call(d3.axisBottom(x));
\t \t // append the y-axis
\t \t svg.select(".y.axis") // change the x axis
\t \t \t .duration(750)
\t \t \t .call(d3.axisBottom(y));
\t }
});