डी 3 जावास्क्रिप्ट विज़ुअलाइजेशन

Question

में JSON डेटा का उपयोग करना मैं जावास्क्रिप्ट डी 3 विज़ुअलाइजेशन टूल (http://mbostock.github.com/d3/) के साथ किए गए कुछ चार्ट ड्राइव करने के लिए JSON डेटा के उपयोग के माध्यम से काम कर रहा हूं। मैं सेटअप मेरे WCF सेवा है, और jQuery में इस कोड को ठीक काम करता है:

$('#getDataItems').click(function() { 

      var $DataList = $('#DataList'); 
      $DataList.empty().appendLi('Loading...'); 

      // Get the JsonP data 
      $.getJSON('http://localhost:65025/CustomersService.svc/GetMyDataItems?callback=?', null, function (somedata) { 
       alert('Received ' + somedata.length + ' Items'); 

       $DataList.empty(); 
       $.each(somedata, function() { 
        $DataList.appendLi(this.ID + " - " + this.Value); 
       }); // end each dataitem function 
      }); // end success function 
     }); // end #getDataItems.click 

डी 3 भी JSON डेटा का उपयोग कर के लिए एक समारोह है, लेकिन मैं अभी तक सफलता मिली नहीं किया है। यह इस तरह दिखता है:

// this works 
//var data = [4, 8, 15, 16, 23, 42]; 

// this doesn't 
    var data = function() { 
      d3.json('http://localhost:65025/CustomersService.svc/GetMyDataItems?callback=?', 
    function (data) } }) 
    } 

//.. rest of the example is known working code so its here only for reference 

// create the chart class as an append to the body element. 
var chart = d3.select("body") 
    .append("svg:svg") 
    .attr("class", "chart") 
    .attr("width", 420) 
    .attr("height", 20 * data.length); 

// Set the width relative to max data value 
var x = d3.scale.linear() 
.domain([0, d3.max(data)]) 
.range([0, 420]); 

var y = d3.scale.ordinal() 
.domain(data) 
.rangeBands([0, 120]); 

chart.selectAll("rect") 
.data(data) 
.enter().append("svg:rect") 
.attr("y", y) 
.attr("width", x) 
.attr("height", y.rangeBand()); 

chart.selectAll("text") 
.data(data) 
.enter().append("svg:text") 
.attr("x", x) 
.attr("y", function (d) { return y(d) + y.rangeBand()/2; }) 
.attr("dx", -3) // padding-right 
.attr("dy", ".35em") // vertical-align: middle 
.attr("text-anchor", "end") // text-align: right 
.text(String); 

सुंदर बहुत सारे कोड डी 3 डाउनलोड, जो ठीक काम करता है में 'बार चार्ट' उदाहरण से है। यदि मैं मैन्युअल रूप से डेटा घोषित करता हूं (उपरोक्त पूर्णांक की सरणी के अनुसार) यह काम करता है, लेकिन JSON कमांड के साथ नहीं। मैंने लौटाए गए डेटा को भी सरल बनाया ताकि इसमें केवल पूर्णांक शामिल हो। आखिरकार, मैं एक 'आईडी फ़ील्ड', 'वैल्यू फ़ील्ड' आदि के साथ JSON डेटा तक पहुंचने में सक्षम होना चाहता हूं और इन्हें कोड में संदर्भित करना चाहता हूं।

किसी के पास कोई विचार है कि मेरा वाक्यविन्यास गलत है या नहीं? मुझे एहसास है कि फ़ंक्शन (डेटा) का उपयोग चार्ट में डेटा जोड़ने के लिए किया जाना है, लेकिन इस उदाहरण में कोड काम करता है इसलिए मैं उस बिंदु से शुरू करना पसंद करूंगा।

Answer 1

डी 3 के स्वयं के जेसन को ढांचे की पूर्णता के लिए कार्य मिल रहा है लेकिन आपको इसका उपयोग करने की आवश्यकता नहीं है। आप अपने डी 3 चार्ट को jQuery $.getJSON के साथ आज़मा सकते हैं और इसे काम करना चाहिए। यह वही है जो मैं करता हूं क्योंकि मेरा अधिकांश विकास jQuery का उपयोग करके किया जाता है।

आपके उदाहरण के लिए, d3.json अर्थशास्त्र $.getJSON जैसा बिल्कुल है। यह एसिंक्रोनस कॉल है जिसमें डेटा पुनर्प्राप्त करने के बाद फ़ंक्शन को कॉल किया जाता है। इस तरह कुछ कोशिश करें:

d3.json(
    'http://localhost:65025/CustomersService.svc/GetMyDataItems?callback=?', 
    function (jsondata) { 

    // create the chart here with 
    // the returned data 

    console.log(jsondata); 

    var data = jsondata.map(function(d) { return d.Value; }); 
    console.log(data); 

    });