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 }
});