Обновление данных графика, но не все перерисовки баров - PullRequest
Новая
       16

Обновление данных графика, но не все перерисовки баров

0 голосов
/ 06 января 2019

Я работаю над гистограммой, которая обновляет свои данные, основываясь на наведении курсора на другой элемент. Когда график обновляется, и если на новом графике меньше баров, на графике постоянно появляется меньше баров, и изменение данных обратно не добавляет их обратно. Я добавил gif, чтобы показать это - когда он опустится до 3 баров они никогда не вернутся.

enter image description here

Вот мой код: 

var scatter_versus_dataset; // the main set
var scatter_versus_dataset_filtered;

// set versus y scale
scatter_versus_y = d3.scaleBand().range([0, SCATTER_VERSUS_HEIGHT])
// set versus x scale
scatter_versus_x_fatal = d3.scaleLinear().range([0, SCATTER_VERSUS_WIDTH / 3]);
scatter_versus_x_nonfatal = d3.scaleLinear().range([-1 * SCATTER_VERSUS_WIDTH / 3, 0 ])
// set the versus colors                   
scatter_versus_z = d3.scaleOrdinal().range(STACK_COLOURS);

...

function updateScatterVersus(code){

// filter the set
scatter_versus_dataset_filtered = scatter_versus_dataset.filter(function (d) { return (d.majorOccCodeGroup == code) })

scatter_versus_y.domain(scatter_versus_dataset_filtered.map(function (d) { return d.occupation; })).padding(BAR_PADDING);
scatter_versus_x_fatal.domain([0, d3.max(scatter_versus_dataset_filtered, function (d) { return d.f_total_rate; })]).nice();
scatter_versus_x_nonfatal.domain([d3.min(scatter_versus_dataset_filtered, function (d) { return +-1 * d.nf_total_rate; }), 0]).nice();

var bars = d3.selectAll("#scatter_versus_fatal_rect")
    .data(scatter_versus_dataset_filtered)
bars.exit()
    .remove()
bars.transition()
    .duration(600)
    .attr("y", function (d) {
        return scatter_versus_y(d.occupation);
    })
    .attr("x", function (d) {
        return scatter_versus_x_fatal(0) + SCATTER_VERSUS_GAP_HALF;
    })
    .attr("width", function (d) {
        return scatter_versus_x_fatal(d.f_total_rate);
    })
    .attr("height", scatter_versus_y.bandwidth())

bars.enter()
    .append("rect")
    .attr('id', 'scatter_versus_fatal_rect')
    .classed("bar", true)
    .attr("y", function (d) {
        return scatter_versus_y(d.occupation);
    })
    .attr("x", function (d) {
        return scatter_versus_x_fatal(0) + SCATTER_VERSUS_GAP_HALF;
    })
    .attr("width", function (d) {
        return scatter_versus_x_fatal(d.f_total_rate);
    })
    .attr("height", scatter_versus_y.bandwidth())

}

Процесс перерисовки другой стороны графика точно такой же. Проблема все еще существует, если я рисую только одну из сторон.

Данные просто из CSV, и я не думаю, что это проблема - отфильтрованный набор имеет правильное количество записей, и это хорошо в других диаграммах. Возможно, это связано с удалением и перерисовкой, но я не могу найти много примеров этого. Или, может быть, ключ? Я могу загрузить некоторые данные, если это необходимо, но это довольно большой CSV.

1 Ответ

0 голосов
/ 06 января 2019

id в HTML уникален, только 1 тег должен иметь его.

Выберите div для столбцов, затем выберитеВсе теги с классом bar и привязайте данные.

Удалите id, который вы добавляете к тратам. 

var bars = d3.select("#scatter_versus_fatal_rect")
    .selectAll(".bar")
    .data(scatter_versus_dataset_filtered);

bars.enter()
    .append("rect")
    // .attr('id', 'scatter_versus_fatal_rect')
    .classed("bar", true)
    ......
...