Элемент бара D3.js не добавляется динамически

1

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

Насколько я понимаю, внутри функции generateBars (data);

Я обновляю домен x и y, гарантируя, что следующий вызов осей заставит их правильно масштабировать:

testUpdateX.domain(data.map(function(d) {return d.destination;}));
testUpdateY.domain([0, d3.max(data, function(d) {return d.p_in;})]); 

Передайте новую переменную данных из параметра:

var bars = svg.selectAll(".testUpdateBar").data(data);

Обновите текущие столбцы x, y, ширину и высоту:

bars.transition().duration(2500)
    .attr("x", function(d) {return testUpdateX(d.destination);})
    .attr("y", function(d) {return testUpdateY(d.p_in);})
    .attr("width", testUpdateX.bandwidth() - 5)
    .attr("height", function(d) {return testUpdateHeight - testUpdateY(d.p_in);})
    .style("fill", function(d) {
        var maxIn = d3.max(data, function(d) {return d.p_in;});
        if (d.p_in < maxIn * 0.3) {
            return "red";
        } else if (d.p_in > maxIn * 0.3 && d.p_in < maxIn * 0.6) {
            return "orange";
        } else {
            return "green";
        }
    });

Затем добавьте новые "прямые" элементы к новым данным посредством вызова функции .enter() и примените к ним те же атрибуты и стили:

 bars.enter().append("rect").attr("class", "testUpdateBar")
     .attr("x", //...)
     .attr("y", //...)
      etc...

Вызов .exit() и .remove(), чтобы удалить бары любых удаленных данных:

bars.exit().transition().duration(2500).remove();

Затем, наконец, перезвоним мои оси, чтобы обновить их в соответствии с недавно указанным доменом:

svg.select(".testUpdateXaxis").transition().duration(2500).call(testUpdateXaxis);
svg.select(".testUpdateYaxis").transition().duration(2500).call(testUpdateYaxis);

Почему последний бар для "Spar" не появляется? По оси Y правильно для него создается новое значение и создается пространство, но элементы прямоугольника, как представляется, не добавляются.

Извините за ненужные имена переменных. Я тестировал это в существующем файле и хотел, чтобы имена не конфликтуют.

Теги:
d3.js

1 ответ

1
Лучший ответ

Посмотрите на свой код. У вас это есть внутри функции generateBars:

var svg = d3.select("body");

Поэтому, когда вы нажимаете кнопку, вы фактически добавляете прямоугольник Spar вашего выбора ввода... вне SVG!

Это должно быть просто:

                   

То есть, ничего!

Вот обновленная версия jsfiddle: https://jsfiddle.net/pugya97h/

  • 0
    Таким образом, удаляя эту строку, svg.someFunction() обращается к исходному экземпляру svg, в котором хранится фактический элемент SVG? Обновленная скрипка с переходом: jsfiddle.net/TomPlum/mae58joo/8
  • 0
    Да, это правильно: поскольку вы ранее определили var svg = d3.select("body").append("svg") , ваш var svg ссылается на добавленный SVG. Кстати, вы можете сохранить много кода с помощью простой функции merge() : jsfiddle.net/fv8ypv4s
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню