Заменить существующие R блестящие данные htmlwidget новыми данными

1

Я создал htmlwidget для одного из моих блестящих приложений R. В моем виджете я не могу заменить существующие данные новыми данными, всякий раз, когда функция визуализации виджета вызывается несколько раз, это приводило к ошибке, а старые данные не удалялись, а новые данные добавлялись со старыми данными.

Я создал воспроизводимый пример, который показывает мою проблему. Когда вы нажимаете кнопку "ui2", приложение переходит к другому ui, и из этого ui, когда вы нажимаете кнопку "reset", он вернет вас к умолчанию ui, и вы увидите, что в одной и той же контейнер вместо одного. Это связано с тем, что я не могу заменить старые данные новыми данными в htmlwidget.

Воспроизводимое блестящее приложение:

#library(devtools)
#install_github('radhikesh/d3Viz')
library(shiny)
library(d3Viz)
ui <- shinyUI(fluidPage(

fluidRow(
column(12,uiOutput("page"))) 
))

ui1 <- function() {
fluidPage(

fluidRow( column(11, 
               div(
                 id = "ResetBtn5", actionButton("ui2", "ui2", style="color: 
#fff; background-color: #337ab7; border-color: #2e6da4")
               ))),

br(),

fluidRow(
column(width = 6, d3HistogramOutput("d3Hist"))
),

br(),
br(),
br(),
br(),
br(),
br(),

fluidRow(
column(12, DT::dataTableOutput("DataAric"))
)

)}

ui2 <- function() {
fluidPage(

fluidRow( column(11, 
                 div(
                   id = "ResetBtn5", actionButton("ResetButtonAric", 
"Reset", style="color: #fff; background-color: #337ab7; border-color: 
#2e6da4")
                 ))),

br(),


fluidRow(
  column(width = 6, d3HistogramOutput("d3Hist2"))
)


)}


server <- shinyServer(function(input, output) {

dataset <- data.frame(lpu = c('Apple','Banana','Apple'), amount = 
                      c(20,10,10))

output$page <- renderUI({
div(class = "outer", do.call(bootstrapPage, c("", ui1())))
})



output$d3Hist <- renderD3Histogram({ 
k <- input$DataAric_rows_all
if (length(k) > 0)
{

  trialAnnotate <- data.frame(table(dataset[k, "lpu"]))
  dataset = data.frame(lpu = trialAnnotate$Var1,amount = trialAnnotate$Freq)
  d3Histogram(dataset = dataset)

 }
})

output$DataAric <-
DT::renderDataTable(
dataset,
  options = list(
    pageLength = nrow( dataset),
    bLengthChange=F
  ),
  rownames = FALSE,
  escape = FALSE
)

output$d3Hist2 <- renderD3Histogram({ 

dataset <- data.frame(lpu = c('Apple','Banana','Orange'), amount = 
                        c(30,20,25))
d3Histogram(dataset = dataset)

})

observeEvent(input$ui2, {


output$page <- renderUI({
  div(class = "outer", do.call(bootstrapPage, c("", ui2())))
})


})

observeEvent(input$ResetButtonAric, {


output$page <- renderUI({
  div(class = "outer", do.call(bootstrapPage, c("", ui1())))
})


})

})

# Run the application 
shinyApp(ui = ui, server = server)

Код d3Histogram.js

HTMLWidgets.widget({
  
  name: 'd3Histogram',
  
  type: 'output',
  
  renderOnNullValue: true,
  
  factory: function(el, width, height) {
    
    return {
      
      renderValue: function(x) {
        
        var container = d3.select(el).append("div").attr("id", "container");
        
        var barPadding = 1;
        
        /*
          var data=[
            {"lpu":"lpu1","amount":"20"},
            {"lpu":"lpu2","amount":"40"},
            {"lpu":"lpu3","amount":"60"},
            {"lpu":"lpu4","amount":"10"},
            {"lpu":"lpu5","amount":"80"},
            {"lpu":"lpu6","amount":"30"},
            {"lpu":"lpu7","amount":"20"},
            {"lpu":"lpu8","amount":"40"},
            {"lpu":"lpu9","amount":"60"},
            {"lpu":"lpu10","amount":"10"},
            {"lpu":"lpu11","amount":"80"},
            {"lpu":"lpu12","amount":"30"},
            {"lpu":"lpu13","amount":"20"},
            {"lpu":"lpu14","amount":"40"},
            {"lpu":"lpu15","amount":"60"},
            {"lpu":"lpu16","amount":"10"},
            {"lpu":"lpu17","amount":"80"},
            {"lpu":"lpu18","amount":"30"}
            ];
          */
            
            var dataset = HTMLWidgets.dataframeToD3(x.dataset);
            
            var width=2000,
            height=300;
            //radius=100,
            //	padding=100;
            
            var margin = {top: 100, right: 50, bottom: 40, left: 50};
            
            var xLPU=d3.scale.ordinal();
            var yLPU=d3.scale.linear();
            
            var xLPUAxis = d3.svg.axis()
            .scale(xLPU)
            .orient("bottom");
            
            var yLPUAxis = d3.svg.axis()
            .scale(yLPU)
            .orient("left")
            .ticks(20, "??????.");
            
            
            var svg1 = d3.select("#container").append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
            
            xLPU.domain(dataset.map(function(d){return d.lpu;}))
            .rangeBands([0, width]);
            yLPU.domain([0,d3.max(dataset, function(d) { return d.amount; })])
            .range([height,0]);
            svg1.append("g")
            .attr("class","x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xLPUAxis);      
            
            svg1.append('g')
            .attr('class','y axis')
            .call(yLPUAxis);
            
            
            svg1.selectAll('rect').data(dataset).enter().append('rect')
            .attr('x', function(d) {
              return xLPU(d.lpu);
            })
            .attr('y',function(d) {
              return yLPU(d.amount);
            })
            .attr('width',xLPU.rangeBand()-3)
            .attr('height', function(d) {
              return height - yLPU(d.amount);
            })
            .attr('fill','teal');
            // .attr("fill", function(d) {
              // return "rgb(0, 0, " + (d * 10) + ")";
              //  });
            
            svg1.selectAll(".bartext")
            .data(dataset)
            .enter()
            .append("text")
            .attr("class", "bartext")
            .attr("text-anchor", "middle")
            .attr("fill", "black")
            .attr("x", function(d,i) {
              return xLPU(d.lpu)+xLPU.rangeBand()/2;
            })
            .attr("y", function(d,i) {
              return yLPU(d.amount) + (-3);
            })
            .text(function(d){
              return d.amount   
            });
            
            svg1.selectAll('.axis line, .axis path')
            .style({'stroke': 'Black', 'fill': 'none', 'stroke-width': '2px'});
            
            svg1.append("text")      // text label for the x axis
            //.attr("x", 265 )
            //.attr("y", 240 )
            //.style("text-anchor", "middle")
            .attr("transform", "translate(" + (width / 2) + " ," + (height + margin.bottom) + ")")
            .text("Year")
            .attr('font-family','sans-serif')
            .attr('font-size','15px')
            .attr('fill','black');
            
            
            svg1.append("text")
            .attr("transform", "rotate(-90)")
            .attr("y", 0 - margin.left)
            .attr("x",0 - (height / 2))
            .attr("dy", "1em")
            .style("text-anchor", "middle")
            .text("Count")
            .attr('font-family','sans-serif')
            .attr('font-size','15px')
            .attr('fill','black');
            
            
            
      },
      
      resize: function(width, height) {
        
        
      }
      
    };
  }
});

Я думаю, я знаю проблему, что мне нужно заменить старые данные новыми данными в моем привязке к Java-скрипту, но я новичок в java-скрипте и не могу понять. Любая помощь будет высоко ценится.

Спасибо

Radhikesh

Теги:
shiny
htmlwidgets

2 ответа

0

Ваш "htmlwidget" регулярно отправляет сообщения в браузер, включая данные. Это означает, что он свяжет новые данные с DOM, и javascript снова запустится. Хотя данные использовались для рисования SVG, он по-прежнему существует независимо от SVG. Проблема не в новых данных (R позаботился об этом), это о том, что старый SVG поддерживает это состояние.

В вашем коде у вас нет возможности удалить существующий сюжет /svg (даже если новые данные были отправлены) в вашем JS файле. Обычно я использую что-то вроде:

this.element.innerHTML = '';

где this текущая область действия виджета. element является el в виджете. Установка innerHTML = ''; очищает элемент DOM и позволяет вашему сценарию добавлять новое изображение.

Рабочий процесс для вашего виджета должен включать эту очистку до любого последующего рисования. Более сложные виджеты могут transition() из предыдущего состояния в новое состояние в d3, но, скорее всего, требует специальной привязки.

Поделиться
0

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

Попробуйте использовать следующий цикл while в начале функции renderValue

while (document.getElementById(el.id).hasChildNodes()) {
    document.getElementById(el.id).removeChild(document.getElementById(el.id).lastChild);
}
Поделиться

Ещё вопросы

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