У меня есть данные, которые фильтруются по годам, а затем вкладываются по группам. Первые несколько лет есть одна группа, а в остальные годы есть семь-восемь групп, для которых нанесены линии. Наряду с линиями я также рисую точки фактических данных. вот график за 2007 год, в котором есть только одна группа:
Линейный график 2007 года Обратите внимание, что ось Y отсутствует, и отображаются только точки, но нет линий.
Вот график за 2010 год с восемью группами:
График 2010 года Обратите внимание на ось Y, отображаются все точки и линии.
Вот связанный код:
Определяющая линия
var line = d3.svg.line()
.x(function(d) { return LoanAmount_scale(d['amount_mean']); })
.y(function(d) { return Investor_scale(d['Investors_mean']); });
var svg = d3.select("body")
.append("svg")
.attr("width", width + margin.left + margin.right )
.attr("height", height + margin.top + margin.bottom);
var plot = svg.append("g")
.attr("class", "chart")
.attr("width" , width- margin.left)
.attr("height", height)
.attr("transform","translate ("+ margin.left + "," + margin.top + ")");
выбор меню
// setting stage for dropdown menu
// years
var years = ['Select Year'];
var i= 2006;
for( i = 2006; i<= 2014; i++){
years.push(i);
}
// selecting an option
var select = d3.select('body')
.append('select')
.attr('class','select')
.attr('id','select_id')
.on('change',change);
// available options on dropdown menu
var option = select.selectAll('option')
.data(years)
.enter()
.append('option')
.text(function(d){ return d});
// menu selection of year
function change(){
var select_year = d3.select('select')
.property('value')
// reset chart before updating year
update(data,'Select Year');
// update year
update(data,select_year);
}
Функция обновления фильтрует год и гнезда по группам, а затем строит линии и точки.
function update(data, year){
var Filtered = data.filter(function(d){ return d["LoanOrig_Yr"] == year});
var nested_by_rating = d3.nest()
.key(function(d) {
return d['ProsperRating']
}).sortKeys(d3.ascending)
.entries(Filtered);
// add lines for each rating
var lines = plot.selectAll("path")
.data(nested_by_rating)
// remove old lines
lines.exit().remove();
plot.selectAll("circle")
.data(nested_by_rating)
.exit().remove();
nested_by_rating.forEach( function(d,i){
var prosperR = d.key
// entering data
lines.enter()
.append("path")
.attr("class", "line")
.attr("d", line(d.values))
.attr("stroke", RatingColor(prosperR))
.attr("stroke-width", 3)
.attr("stroke-opacity",0.3)
.attr("fill","none");
debugger;
plot.selectAll("path.dot")
.data(d.values)
.enter().append("circle")
.attr("class", "dot")
.attr("cx", line.x())
.attr("cy", line.y())
.attr("r", 3.5)
.attr("fill","Black");
debugger;
// dynamic legend
svg.append("text")
.attr("x", 1300)
.attr("y", 100 + i*20)
.attr("class", "legend") // style the legend
.style("fill", function() { // Add the colours dynamically
return d.color = RatingColor(prosperR); })
.text(prosperR);
Сбросить диаграмму между выбором года
// reseting chart between years
if (year == 'Select Year'){
gX.call(xAxis);
gY.call(yAxis);
svg.append("text")
.attr("x", 1300)
.attr("y", 100)
.attr("class", "legend") // style the legend
.style("fill", "white")
.text(["NR"]);
svg.selectAll("legend_text")
.data(["1.AA","2.A","3.B","4.C","5.D","6.E","7.HR","NR"])
.enter()
.append("text")
.attr("class","legend")
.attr("x", 1300)
.attr("y", function(d,i){return 100 + i*20;
})
.attr("class", "legend") // style the legend
.style("fill", "white")
.style("stroke","white")
.text(function(d,i){return d;});
} \\ end if statement
} \\end .forEach statement
При отслеживании ввода и вывода данных с помощью инспектора браузера я обнаружил, что данные в обоих случаях перемещаются и выводятся, как и ожидалось. Обратите внимание, что данные точек передаются с использованием line.x () и line.y (), поэтому очень странно, что линия не отображается в 2007 году и других подобных годах с одной группой.
Буду признателен за любую помощь в исправлении этой ошибки. Спасибо.