Переходы D3 с несколькими графиками

Я пытаюсь добавить раскрывающееся меню, которое выбирает, какую меру для графика. У меня есть 8 графиков, все они изображают одну и ту же меру, но разные этнические группы. Ниже приведен код, какие-то мысли о том, что я делаю неправильно? Прямо сейчас я получаю ошибку exit() is not a function.Переходы D3 с несколькими графиками

Хорошо, я сделал некоторый прогресс со следующим, однако он все еще немного удручен. Графики изменение, но происходят от диаграмм - YAxis является масштабирование до максимума всех графиков, а не локальная .:

function updateGraphs(newData) { 


    d3.selectAll("svg").each(function(d, i){ 

     eachRace = d.values; 
     svg = d3.select(this); 
     yMax = d3.max(eachRace, function(d) { return d[newData]; }); 
     yScale = d3.scale.linear().domain([0, yMax*1.25]).range([height/8, 0]).nice(); 
     yAxis = d3.svg.axis().scale(yScale).orient("left").ticks(5); 

     line = d3.svg.line() 
     .x(function (d) { return x(d.date); }) 
     .y(function (d) { return yScale(d[newData]); }) 

     d3.transition().duration(1000).selectAll(".line") 
     .attr("id", function(d) { return d.key ;}) 
     .attr('class', 'line') 
     .attr('opacity', .8) 
     .attr('d', function(d) { return line(d.values); }) 

     d3.selectAll(".y.axis") 
     .call(yAxis); 

    }); 
} 

var svgContainer = d3.select("body").selectAll("svg") 
    .data(data2) 

    svgContainer.enter() 
    .append("svg") 
     .attr("width", 150) 
     .attr("height", 400) 
     .attr("transform", "translate(" + margin.left + "," + margin.top+ ")"); 

    d3.selectAll("svg").each(function(d, i){ 

     var eachRace = d.values; 
     var svg = d3.select(this); 
     var yMax = d3.max(eachRace, function(d) { return d.app; }); 
     var yScale = d3.scale.linear().domain([0, yMax*1.25]).range([height/8, 0]).nice(); 
     var yAxis = d3.svg.axis().scale(yScale).orient("left").ticks(5); 

     var line = d3.svg.line() 
     .x(function (d) { return x(d.date); }) 
     .y(function (d) { return yScale(d.app); }) 

     svg.append("path") 
     .attr("id", function(d) { return d.key ;}) 
     .attr('class', 'line') 
     .attr('opacity', .8) 
     .attr('d', function(d) { return line(d.values); }) 

     svg.append("g") 
     .attr("class", "y axis") 
     .call(yAxis); 


    });

источник

2015-07-07 As3adTintin

'введите()' и 'выхода()' являются seconary функции к 'данных()' функцию. Например, вы должны использовать 'data (someArray) .exit()'. То, что делает ваш код, это попытка вызвать 'exit' на несколько элементов' g'. Попробуйте просто 'svg.remove()' или 'svg.data ([]). Exit(). Remove()', если вы хотите сохранить поведение удаления. – JSBob

@JSBob мм спасибо за разъяснение. Я хочу сохранить '.exit()' для интерактивного свойства, но я буду изучать их использование в отношении 'data' – As3adTintin

@JSBob Я попытался отредактировать его и избавился от ошибки' exit() ', однако я У меня все еще есть проблемы с тем, чтобы избавиться от старых svg. прямо сейчас это просто добавление их – As3adTintin

Спасибо JSBob для работы со мной. Я получил это работает с:

функции updateGraphs (NewData) {

d3.selectAll("svg").each(function(d, i){ 

    eachRace = d.values; 
    svg = d3.select(this); 
    yMax = d3.max(eachRace, function(d) { return d[newData]; }); 
    yScale = d3.scale.linear().domain([0, yMax*1.25]).range([height/8, 0]).nice(); 
    yAxis = d3.svg.axis().scale(yScale).orient("left").ticks(5); 
    console.log(yMax); 
    line = d3.svg.line() 
    .x(function (d) { return x(d.date); }) 
    .y(function (d) { return yScale(d[newData]); }) 

    svg.transition().duration(1000).select(".line") 
    .attr("id", function(d) { return d.key ;}) 
    .attr('class', 'line') 
    .attr('opacity', .8) 
    .attr('d', function(d) { return line(d.values); }); 

    svg.transition().duration(1000).select(".y.axis") 
    .call(yAxis); 

}); 
}

источник

2015-07-07 20:05:18 As3adTintin

Переходы D3 с несколькими графиками

ответ

Смежные вопросы