d3.js अक्ष पर दिनांकों से निपटने

Question

मैं अपनी लाइन x-axis को d3.js में दिनांक के आधार पर कैसे बना सकता हूं?

मैं खुद को सिखाने का प्रयास कर रहा हूं कि d3.js. का उपयोग कैसे करें। मैं उन उदाहरणों को देख रहा हूं जो इसके साथ आते हैं और जेसन वितरित डेटा का उपयोग कर लाइन ग्राफ़ को फिर से बनाने का प्रयास कर रहे हैं। मैं डेटा ग्राफ़ में डेटा को खिलाने में सक्षम हूं, लेकिन x-axis को किसी संख्या की बजाय दिनांक होना चाहिए। जिस दिनांक प्रारूप का मैं उपयोग कर रहा हूं वह एमएम/डीडी/वाई वाई है, लेकिन ग्राफ 0 पर सबकुछ प्लॉट करता है। मेरा जेसन डेटा ठीक से आ रहा है, लेकिन मुझे एक्स समन्वय को साजिश करने के तरीके को समझने में परेशानी हो रही है। यह सीधे line.js से लिया गया था जो डाउनलोड होने पर d3.js उदाहरण फ़ोल्डर में आता है। तारीख का हिस्सा चाल नहीं करता है। मुझे उम्मीद है कि कोई मुझे एक उदाहरण के लिए इंगित कर सकता है या यह समझाने में सक्षम हो सकता है कि मैं इसे कैसे काम कर सकता हूं।

d3.json('jsonChartData.action', 
    function (data) { 
    console.log(data); 

    var w = 450, 
    h = 275, 
    p = 30, 
    x = d3.scale.linear().domain([0, 100]).range([0, w]), 
    y = d3.scale.linear().domain([0, 100]).range([h, 0]); 

    var vis = d3.select("body") 
    .data([data]) 
    .append("svg:svg") 
    .attr("width", w + p * 2) 
    .attr("height", h + p * 2) 
    .append("svg:g") 
    .attr("transform", "translate(" + p + "," + p + ")"); 

    var rules = vis.selectAll("g.rule") 
    .data(x.ticks(5)) 
    .enter().append("svg:g") 
    .attr("class", "rule"); 

    rules.append("svg:line") 
    .attr("x1", x) 
    .attr("x2", x) 
    .attr("y1", 0) 
    .attr("y2", h - 1); 

    rules.append("svg:line") 
    .attr("class", function(d) { return d ? null : "axis"; }) 
    .attr("y1", y) 
    .attr("y2", y) 
    .attr("x1", 0) 
    .attr("x2", w + 1); 

    rules.append("svg:text") 
    .attr("x", x) 
    .attr("y", h + 3) 
    .attr("dy", ".71em") 
    .attr("text-anchor", "middle") 
    .text(x.tickFormat(10)); 

    rules.append("svg:text") 
    .attr("y", y) 
    .attr("x", -3) 
    .attr("dy", ".35em") 
    .attr("text-anchor", "end") 
    .text(y.tickFormat(10)); 

    vis.append("svg:path") 
    .attr("class", "line") 
    .attr("d", d3.svg.line() 
    .x(function(d) { return x(d3.time.days(new Date(d.jsonDate))); }) 
    .y(function(d) { return y(d.jsonHitCount); })); 

    vis.selectAll("circle.line") 
    .data(data) 
    .enter().append("svg:circle") 
    .attr("class", "line") 
    .attr("cx", function(d) { return x(d3.time.days(new Date(d.jsonDate))); }) 
    .attr("cy", function(d) { return y(d.jsonHitCount); }) 
    .attr("r", 3.5); 
    }); 

JSON के रूप में मेरी कार्रवाई से बाहर मुद्रित:

[{"jsonDate":"09\/22\/11","jsonHitCount":2,"seriesKey":"Website Usage"},`{"jsonDate":"09\/26\/11","jsonHitCount":9,"seriesKey":"Website Usage"},{"jsonDate":"09\/27\/11","jsonHitCount":9,"seriesKey":"Website Usage"},{"jsonDate":"09\/29\/11","jsonHitCount":26,"seriesKey":"Website Usage"},{"jsonDate":"09\/30\/11","jsonHitCount":2,"seriesKey":"Website Usage"},{"jsonDate":"10\/03\/11","jsonHitCount":3,"seriesKey":"Website Usage"},{"jsonDate":"10\/06\/11","jsonHitCount":2,"seriesKey":"Website Usage"},{"jsonDate":"10\/11\/11","jsonHitCount":2,"seriesKey":"Website Usage"},{"jsonDate":"10\/12\/11","jsonHitCount":2,"seriesKey":"Website Usage"},{"jsonDate":"10\/13\/11","jsonHitCount":1,"seriesKey":"Website Usage"},{"jsonDate":"10\/14\/11","jsonHitCount":5,"seriesKey":"Website Usage"},{"jsonDate":"10\/17\/11","jsonHitCount":2,"seriesKey":"Website Usage"},{"jsonDate":"10\/18\/11","jsonHitCount":6,"seriesKey":"Website Usage"},{"jsonDate":"10\/19\/11","jsonHitCount":8,"seriesKey":"Website Usage"},{"jsonDate":"10\/20\/11","jsonHitCount":2,"seriesKey":"Website Usage"},{"jsonDate":"10\/21\/11","jsonHitCount":4,"seriesKey":"Website Usage"},{"jsonDate":"10\/24\/11","jsonHitCount":1,"seriesKey":"Website Usage"},{"jsonDate":"10\/25\/11","jsonHitCount":1,"seriesKey":"Website Usage"},{"jsonDate":"10\/27\/11","jsonHitCount":3,"seriesKey":"Website Usage"},{"jsonDate":"11\/01\/11","jsonHitCount":2,"seriesKey":"Website Usage"},{"jsonDate":"11\/02\/11","jsonHitCount":1,"seriesKey":"Website Usage"},{"jsonDate":"11\/03\/11","jsonHitCount":2,"seriesKey":"Website Usage"},{"jsonDate":"11\/04\/11","jsonHitCount":37,"seriesKey":"Website Usage"},{"jsonDate":"11\/08\/11","jsonHitCount":1,"seriesKey":"Website Usage"},{"jsonDate":"11\/10\/11","jsonHitCount":39,"seriesKey":"Website Usage"},{"jsonDate":"11\/11\/11","jsonHitCount":1,"seriesKey":"Website Usage"},{"jsonDate":"11\/14\/11","jsonHitCount":15,"seriesKey":"Website Usage"},{"jsonDate":"11\/15\/11","jsonHitCount":2,"seriesKey":"Website Usage"},{"jsonDate":"11\/16\/11","jsonHitCount":5,"seriesKey":"Website Usage"},{"jsonDate":"11\/17\/11","jsonHitCount":4,"seriesKey":"Website Usage"},{"jsonDate":"11\/21\/11","jsonHitCount":2,"seriesKey":"Website Usage"},{"jsonDate":"11\/22\/11","jsonHitCount":3,"seriesKey":"Website Usage"},{"jsonDate":"11\/23\/11","jsonHitCount":11,"seriesKey":"Website Usage"},{"jsonDate":"11\/24\/11","jsonHitCount":2,"seriesKey":"Website Usage"},{"jsonDate":"11\/25\/11","jsonHitCount":1,"seriesKey":"Website Usage"},{"jsonDate":"11\/28\/11","jsonHitCount":10,"seriesKey":"Website Usage"},{"jsonDate":"11\/29\/11","jsonHitCount":3,"seriesKey":"Website Usage"}]` 

Answer 1

आप दिनांकों d3.scale.linear() उपयोग करने के लिए कोशिश कर रहे हैं, और कहा कि काम नहीं करेगा। आप (docs) के बजाय d3.time.scale() उपयोग करने की आवश्यकता:

// helper function 
function getDate(d) { 
    return new Date(d.jsonDate); 
} 

// get max and min dates - this assumes data is sorted 
var minDate = getDate(data[0]), 
    maxDate = getDate(data[data.length-1]); 

var x = d3.time.scale().domain([minDate, maxDate]).range([0, w]); 

तो फिर तुम समय अंतराल कार्यों से निपटने के लिए की जरूरत नहीं है, तो आप सिर्फ x एक तारीख से पारित कर सकते हैं:

.attr("d", d3.svg.line() 
    .x(function(d) { return x(getDate(d)) }) 
    .y(function(d) { return y(d.jsonHitCount) }) 
); 

यहां काम करते हुए बेला: http://jsfiddle.net/nrabinowitz/JTrnC/