Динамическое обновление гистограммы с помощью раскрывающегося меню - PullRequest
Новая
       5

Динамическое обновление гистограммы с помощью раскрывающегося меню

0 голосов
/ 07 мая 2020

На диаграмме отображаются данные, но при срабатывании функции обновления обновленные столбцы не отображаются.

Если я использую .data (), результат будет как на первом изображении, и если я изменю его на .datum (), тогда нет полосы, как на втором изображении.

Мне нужно чтобы знать также, где использовать d3 .data () vs .datum ().

Пожалуйста, по возможности исправьте мой код.

Заранее спасибо

here is the code

var u=  svg.selectAll("rect")
             // .data(data)
          .data(data.filter(function(d)
          {
            return d.ddata==allCourse[0]}))
         // .datum(data.filter(function(d)
         // {
           // return d.ddata==allCourse[0]}))
  // update bars
        u
          .enter().append("rect")
           .merge(u)

          // .attr("class", "bar")
          // .transition()
          // .duration(1000)
          .attr("x", function(d) { return x(d.Item); })
          .attr("y", function(d) { return y(+d.count); })
          .attr("width", x.bandwidth())
          .attr("height", function(d) { return height - y(+d.count); })
          .attr("fill", function(d) { return colours(d.Item); })
          .append("title")
          .text(function(d){
            return d.Item + " : " + d.count});

        svg.append("text")
           .attr("class", "label")
           .attr("y", height/100)
           .attr("x", width/2)
           .attr("text-anchor", "middle")
           .text("Assignments")

        svg.append("text")
           .attr("transform", "rotate(-90)")
                //.text("Range")
           .attr("y", -29)
           .attr("x", -(height/2))
           .attr("text-anchor", "middle")
           .text('Ratio');


    //This function will update the chart
    function update(selectedCourse) {

      // Select new data from the dataset upon select option
      var dataFilter = data.filter(function(d)
      {
        return d.ddata==selectedCourse})

      // update bars

          u
               .datum(dataFilter)
               .transition()
               .duration(250)
               .attr("class", "bar")
               .attr("x", function(d) { return x(d.Item); })
               .attr("y", function(d) { return y(+d.count); })
               .attr("fill", function(d) { return colours(d.Item); })
               .attr("width", x.bandwidth())
               .attr("height", function(d) { return height - y(+d.count); })
               .text(function(d){
                return d.Item + " : " + d.count});

    }

output with .data but the chart does not bars[![Output with .datum

1 Ответ

1 голос
/ 08 мая 2020

Вместо .datum () у меня работает .data (). 

function update(selectedGroup) {

  // Select new data from the dataset upon select option
  var dataFilter = data.filter(function(d)
  {
    return d.ddata==selectedGroup})

  // update bars
  svg.selectAll(".bar")
           .data(dataFilter)
           .transition()
           .duration(250)
           .attr("x", function(d) { return x(d.Item); })
           .attr("y", function(d) { return y(+d.count); })
           .attr("fill", function(d) { return colours(d.Item); })
           .attr("width", x.bandwidth())
           .attr("height", function(d) { return height - y(+d.count); })
           .text(function(d){
            return d.Item + " : " + d.count});
...