बाध्यकारी जावास्क्रिप्ट (d3.js) चमकदार

Question

सबसे पहले, मैं जावास्क्रिप्ट और इसकी लाइब्रेरी d3.js से काफी अपरिचित हूं, लेकिन मैं आर से परिचित हूं। चमकदार का उपयोग करके डैशबोर्ड बनाना मजेदार और आसान है (स्टैक ओवरफ्लो के लिए धन्यवाद)। अब मैं इसे डी 3 तत्वों से कनेक्ट करके विस्तारित करना चाहता हूं।

मैं वास्तव में चमकदार (आर डैशबोर्ड) में जावास्क्रिप्ट को बाध्य करने और वास्तव में क्या चल रहा है, इस बारे में जानकारी स्रोतों की तलाश में हूं।

पृष्ठभूमि: मैंने w3schools पर जेएस और jquery पर ट्यूटोरियल किया और स्कॉट मरे की पुस्तक (वेब ​​के लिए इंटरएक्टिव डेटा विज़ुअलाइज़ेशन) का उपयोग करके डी 3 के बारे में सीखा (थोड़ा)। मैं आशा व्यक्त की यह मेरे उदाहरण और कस्टम इनपुट/आउटपुट बाइंडिंग चमकदार वेबसाइट पर निर्माण करने के लिए कैसे के विषय में स्पष्टीकरण को समझने बनाने के लिए पर्याप्त होगा:

http://shiny.rstudio.com/articles/building-inputs.html

लेकिन दुर्भाग्य से मैं नहीं करते हैं और मैं नहीं कर पा रहे कम से कम काम करने वाले कोड में कोई उदाहरण खोजें। जिथब पर कई उदाहरण मेरे लिए विच्छेदन करने के लिए जटिल हैं, संभवतः जावास्क्रिप्ट के साथ मेरे छोटे अनुभव के कारण। यहाँ कस्टम इनपुट का एक उदाहरण जावास्क्रिप्ट के साथ बाध्यकारी है:

<script src="http://d3js.org/d3.v3.js"></script> 
<script type="text/javascript"> 
(function(){ 
    // Probably not idiomatic javascript. 

    this.countValue=0; 

    // BEGIN: FUNCTION 
    updateView = function(message) { 

    var svg = d3.select(".d3io").select("svg") 

    svg.append("text") 
     .transition() 
     .attr("x",message[0]) 
     .attr("y",message[1]) 
     .text(countValue) 
     .each("end",function(){ 
     if(countValue<100) { 
      countValue+=1; 
      $(".d3io").trigger("change"); 
     } 
     }) 
    } 
    // END: FUNCTION 

    //BEGIN: OUTPUT BINDING 
    var d3OutputBinding = new Shiny.OutputBinding(); 
    $.extend(d3OutputBinding, { 
    find: function(scope) { 
     return $(scope).find(".d3io"); 
    }, 
    renderError: function(el,error) { 
     console.log("Foe"); 
    }, 
    renderValue: function(el,data) { 
     updateView(data); 
     console.log("Friend"); 
    } 
    }); 
    Shiny.outputBindings.register(d3OutputBinding); 
    //END: OUTPUT BINDING 

    //BEGIN: INPUT BINDING 
    var d3InputBinding = new Shiny.InputBinding(); 
    $.extend(d3InputBinding, { 
    find: function(scope) { 
     return $(scope).find(".d3io"); 
    }, 
    getValue: function(el) { 
     return countValue; 
    }, 
    subscribe: function(el, callback) { 
     $(el).on("change.d3InputBinding", function(e) { 
     callback(); 
     }); 
    } 
    }); 
    Shiny.inputBindings.register(d3InputBinding); 
//END: OUTPUT BINDING 

})() 
</script> 

"d3io" कहाँ एक div तत्व है:

https://github.com/jcheng5/shiny-js-examples/tree/master/input

यहाँ बाध्यकारी मैं प्रकट करने की कोशिश एक इनपुट & उत्पादन का एक उदाहरण है ui में, updateView() एक फ़ंक्शन है।

#UI 
library(shiny) 

d3IO <- function(inputoutputID) { 
    div(id=inputoutputID,class=inputoutputID,tag("svg","")) #; eerst zat ; erbij, maar werkt blijkbaar ook zonder 
} 

# Define UI for shiny d3 chatter application 
shinyUI(pageWithSidebar(

    # Application title 
    headerPanel("D3 Javascript chatter", 
       "Demo of how to create D3 I/O and cumulative data transfer"), 

    sidebarPanel(
    tags$p("This widget is a demonstration of how to wire shiny direct to javascript, without any input elements."), 
    tags$p("Each time a transition ends, the client asks the server for another packet of information, and adds it 
      to the existing set"), 
    tags$p("I can't claim this is likely to be idiomatic javascript, because I'm a novice, but it allows d3 apps 
      to do progressive rendering. In real use, a more complex request/response protocol will probably be 
      required. -AlexBBrown") 
), 

    mainPanel(
    includeHTML("d3widget.js"), 
    d3IO("d3io") #Creates div element that d3 selects 
    ) 
)) 

यहाँ सर्वर फ़ाइल है::

# SERVER 
library(shiny) 
# Define server logic required to respond to d3 requests 
shinyServer(function(input, output) { 

    # Generate a plot of the requested variable against mpg and only 
    # include outliers if requested 
    output$d3io <- reactive(function() { 
    if (is.null(input$d3io)) { 
     0; 
    } else { 
     list(rnorm(1)*400+200,rnorm(1)*400+200); 
    } 
    }) 
}) 

विशिष्ट सवाल: यहाँ ui है

1) server.r "d3io" कहा जाता है इनपुट प्राप्त करने के लिए लगता है (इनपुट $ d3io) चूंकि यह ui.r में परिभाषित नहीं है, इसलिए मैंने तर्क दिया कि यह जावास्क्रिप्ट फ़ाइल से आना चाहिए। वास्तव में इसका कौन सा तत्व संदर्भित करता है?

2) मैं मुसीबत कस्टम बंधन हिस्सा समझ है:,

एक नया चमकदार outputbinding बनाएं, प्रथम श्रेणी .d3io (div तत्व) पाते हैं तो त्रुटि:

var d3OutputBinding = new Shiny.OutputBinding(); 
    $.extend(d3OutputBinding, { 
    find: function(scope) { 
     return $(scope).find(".d3io"); 
    }, 
    renderError: function(el,error) { 
     console.log("Foe"); 
    }, 
    renderValue: function(el,data) { 
     updateView(data); 
     console.log("Friend"); 
    } 
    }); 
    Shiny.outputBindings.register(d3OutputBinding); 

मेरे समझ है कंसोल "फो" (क्या यह विशेष कोड है?), यदि त्रुटि नहीं है तो फ़ंक्शन अपडेट का उपयोग करके वैल्यू देखें डेटा का उपयोग करके देखें (यह मान कहां से प्राप्त होता है?) और कंसोल "मित्र" को लिखें। अंत में आउटपुट रजिस्टर करें।

आशा है कि आप लोग मदद कर सकते हैं! मैं "कैसे चमकदार में जावास्क्रिप्ट लागू करने के लिए जब आप किसी भी जावास्क्रिप्ट पता नहीं है जानने के लिए आवश्यक कदम", मुझे लगता है कि प्यार होता पर चरणों के साथ एक दस्तावेज़ बनाने रहा हूँ! :)

चीयर्स, लांग

Answer 1

हाय स्वीटबाबाजेसस (कहना मजेदार है)। आप दो सवाल था:

1) server.r "d3io" (इनपुट $ d3io) के बाद से इस ui.r में परिभाषित नहीं है, मैं तर्क यह जावास्क्रिप्ट फ़ाइल से आना चाहिए बुलाया इनपुट प्राप्त करने के लिए लगता है। वास्तव में इसका कौन सा तत्व संदर्भित करता है?

कि वाक्यांश input$d3io निम्न घटक होते हैं:

• input एक पैरामीटर समारोह में पारित कर दिया है - यह एक सूची है कि भंडार अनुप्रयोग में सभी विजेट की वर्तमान मूल्यों।
• $ सदस्य चयनकर्ता है।
• d3io यूआई के मुख्य पैनल में उस आईडी ('d3IO ("d3io")' के साथ div तत्व की सामग्री को संदर्भित करता है।

  var d3OutputBinding = new Shiny.OutputBinding(); 
  

  यह सही है, यह Shiny.OutputBinding का एक उदाहरण बनाता है और चर d3OutputBinding करने के लिए इसे प्रदान करती है:

2) मैं मुसीबत कस्टम बंधन हिस्सा समझने की है।

$.extend(d3OutputBinding, { 
    find: function(scope) { 
    return $(scope).find(".d3io"); 
    }, 
    renderError: function(el,error) { 
    console.log("Foe"); 
    }, 
    renderValue: function(el,data) { 
    updateView(data); 
    console.log("Friend"); 
    } 
}); 

इस कोड को तीन कार्यों find, renderError और renderValue कहा जाता है के साथ d3OutputBinding के व्यवहार फैली हुई है। उन तीन कार्यों को Shiny.Output बाइंडिंग के लिए आवश्यक है।

find कुंजी है क्योंकि यह उन तत्वों की एक सूची देता है जिन्हें उनके el पैरामीटर के माध्यम से दो रेंडर कार्यों में पारित किया जाना चाहिए। ध्यान दें कि यह लौटने वाले तत्व हैं जिनके सीएसएस वर्ग "d3io" हैं - यह वही div है जो पहले उल्लेख किया गया था।

ध्यान दें कि extend() jQuery जावास्क्रिप्ट लाइब्रेरी का एक फ़ंक्शन है, और $ इस संदर्भ में jQuery ऑब्जेक्ट के लिए उपनाम है।

Shiny.outputBindings.register(d3OutputBinding); 

चमकदार को पता है कि इस नए कॉन्फ़िगर किए गए ऑब्जेक्ट को अब उपयोग करने के लिए रखा जाना चाहिए।

चीयर्स, निक

Answer 2

मैं एक कदम वापस लेने जा रहा हूं और मानता हूं कि आप आश्चर्यजनक परिणाम चाहते हैं कि डी 3 सक्षम है, लेकिन आवश्यक रूप से डी 3 से बंधे नहीं हैं। अनिवार्य रूप से, मैं इस प्रश्न का उत्तर दूंगा:

जब आप किसी जावास्क्रिप्ट को नहीं जानते हैं तो जावास्क्रिप्ट को चमकाने के तरीके के बारे में जानने के लिए आवश्यक कदम क्या हैं?

जबकि डी 3 आश्चर्यजनक रूप से शक्तिशाली है, यह भी बहुत ही मुश्किल है - यहां तक ​​कि जावास्क्रिप्ट के साथ काफी आरामदायक लोगों के लिए भी। जबकि मुझे डी 3 पसंद है और लगभग हर दिन इसका इस्तेमाल करते हैं, मैं इस मामले में इसके खिलाफ सिफारिश करता हूं। इसके बजाए, Plotly नामक लाइब्रेरी है, जो पृष्ठभूमि में डी 3 का उपयोग करती है, लेकिन विशेष रूप से वैज्ञानिक समुदाय और डेटा वैज्ञानिकों के लिए बनाई गई है, इसलिए यह आर समुदाय के लिए बहुत अनुकूल है।

उनके पास thorough tutorial for connecting to Shiny है और यहां तक ​​कि ggplot2 converter भी है यदि आप पहले से ही उस वाक्यविन्यास से परिचित हैं, तो आर दुनिया में बहुत से लोग हैं। जब तक आपकी ज़रूरतें बहुत असामान्य न हों, तब तक पूरी तरह से आपकी जरूरतों को पूरा करने के साथ ही डी 3 में सीधे लिखने के साथ-साथ अधिक दोस्ताना सीखने की वक्र भी होगी।

Answer 3

क्या आप rCharts package से परिचित हैं? यह चमकदार के साथ बहुत अच्छी तरह से काम कर सकता है और अधिकांश आउटपुट विकल्प डी 3 वेरिएंट पर आधारित हैं। Twoexamples।

Answer 4

काम के साथ बहुत व्यस्त है, मैं यह पोस्ट करने के लिए मौका नहीं मिला है। ध्यान दें कि यह कस्टम मैसेज हैंडलर का उपयोग कर एक वर्कअराउंड है (और मैं कस्टम इनपुट/आउटपुट बाइंडिंग का उपयोग नहीं कर रहा हूं)। यहां जाता है:

उद्देश्य: कस्टम मैसेज हैंडलर का उपयोग करके डी 3 जेएस पेड़ बनाने के लिए डेटा फ्रेम से डेटा भेजें।

पथ: मैंने डेटा को डी.जे.जे. पेड़ में डेटा.फ्रेम प्रारूप में भेजने में कामयाब रहा है। एक्शनबटन पर क्लिक करने के बाद, यह डेटा फ्रेम में डेटा को JSON प्रारूप में बदल देता है, फिर उसे जेएस फ़ाइल में भेजता है जो पेड़ बनाता है। पेड़ का डेटा "server.r" पर हार्ड-कोड किया गया है।

कोड कहां है? मेरे जिथब पर! https://github.com/SweetBabyJesus/shiny-d3js-simple-binding

मूल: मैंने बड़े डेटासेट से अंतर्दृष्टि बनाने के लिए CHAID के आधार पर एक पेड़ एल्गोरिदम बनाया। लोग अपने सीएसवी को डैशबोर्ड पर अपलोड कर सकते हैं जो तब d3js पेड़ को थूकता है :) कोड कुछ हद तक लंबा है, इसलिए मैंने इसे आपके लिए घटा दिया और न्यूनतम कोड उदाहरण बनाया।

आशा है कि आप इसे पसंद करेंगे।

चीयर्स, लांग