डी 3 जेएस - एक ही बिंदु पर सभी डेटा प्लॉटिंग जब तक ग्राफ बहुत व्यापक न हो

मैं डेटाबेस से डेटा निकालने के लिए निम्न कोड का उपयोग कर रहा हूं और फिर इसे डी 3 एसवीजी कैनवास पर प्लॉट कर रहा हूं। मुझे निम्नलिखित प्रारूपों में डेटा दिखाने में सक्षम होना चाहिए: आधे घंटे, प्रति घंटा, दैनिक, साप्ताहिक, मासिक और वार्षिक। मिनट में उन सभी को छोड़कर 2 सबसे छोटे काम ठीक काम कर रहे हैं।

जब ग्राफ में बहुत अधिक डेटा जोड़ा जाता है, तो सब कुछ एक ही एक्स समन्वय पर साजिश शुरू करता है।

    <script>

function buildChart(groupby) {

    $('.svg-container').find('svg').empty();

   //Set the dateformat for the X axis and the dateFormat for the ticks
    if (groupby == '2') {
        var dateFormatPattern = '%Y';
        var tickFormatPattern = '%Y';
    } else if (groupby == '3') {
        var dateFormatPattern = '%B';
        var tickFormatPattern = '%B';
    } else if (groupby == '4') {
        var dateFormatPattern = 'Week %U';
        var tickFormatPattern = 'Week %U';
    } else if (groupby == '5') {
        var dateFormatPattern = '%b %d';
        var tickFormatPattern = '%b %d';
    } else if (groupby == '6') {
        var dateFormatPattern = '%b %d';
        var tickFormatPattern = '%c';
    }

    var margin = {top: 60, right: 20, bottom: 30, left: 60},
        width = $('.svg-container').width() - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;

    var x = d3.scale.ordinal()
        .rangeRoundBands([0, width], .2);

    var y = d3.scale.linear()
        .range([height, 0]);

    var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom")
        .tickFormat(function(d) { return d3.time.format(dateFormatPattern)(new Date(d)); });

    var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left")
        .ticks(5)
        .tickFormat(function(d) { return d + " kWh" });

    var tip = d3.tip()
      .attr('class', 'd3-tip')
      .offset([-10, 0])
      .html(function(d) {
       //Format the date of the highlighted bar to output it consistently
        var formattedDate = d3.time.format(tickFormatPattern)(new Date(d.date));
        var tooltip_content = "Date: " + formattedDate + "
"; tooltip_content += "Consumption: " + d3.format(".2f")(d.value) + " kWh"; return tooltip_content; }) var svg = d3.select(".svg-container svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); svg.call(tip); /**** * * Get the data * ****/ $.post('http://127.0.0.1/data/getData.php?DanChart', {request:'{"electric":[{"id":"12"}]}', filters:'{"date":["range", "2013-11-05", "", "2013-11-12"], meter:[1], houseId2:[5]}', groupby: groupby}, function (data) { x.domain(data.map(function(d) { return d.date; })); y.domain([0, d3.max(data, function(d) { return Math.max(d.value); })]); console.log(data); svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis); svg.append("g") .attr("class", "y axis") .call(yAxis); svg.selectAll(".bar") .data(data) .enter().append("rect") .attr("class", function(d) { var day = new Date(d.date); console.log(day); if (day.getDay()%6==0 && groupby == '5') { return "bar weekend"; } else { return "bar"; } }) //.attr("class", "bar") .attr("x", function(d) { return x(d.date); }) .attr("width", x.rangeBand()) .attr("y", function(d) { return y(d.value); }) .attr("height", function(d) { return height - y(d.value); }) .on('mouseover', tip.show) .on('mouseout', tip.hide); //How many ticks are there? var numberOfTicks = data.length; //Work out the longest length of any tick var tickLength = 0; $(".svg-container").find('.x .tick').each(function(){ if($(this)[0].getBBox().width > tickLength){ tickLength = $(this)[0].getBBox().width; } }); //Add some padding tickLength = tickLength + 10; //How many ticks could possibly fit across the X axis var maximumTicks = (width/tickLength); //Work out which occurance of tick should be shown. //E.g. if tickRatio = 2, every other tick will be shown, starting from the first tick //So ticks 1,3,5,7 and so on will be visible and the others are hidden to prevent overlapping var tickRatio = Math.ceil(numberOfTicks/maximumTicks); //console.log('tickratio',tickRatio); //console.log('noofticks',numberOfTicks); //console.log('maximumTicks',maximumTicks); //Use CSS selectors to calcuate which ticks need hiding, and give them the class hidden-tick if (tickRatio > 1) { $('.svg-container').find('.x .tick:not(:nth-child('+tickRatio+'n+1))').attr('class','tick hidden-tick'); } }); } /**** * * Build initial chart, 5 is for daily records * ****/ buildChart('6'); </script>

अगर मैं निम्नलिखित पंक्ति बदलता हूं:

width = $('.svg-container').width() - margin.left - margin.right,

सेवा मेरे:

width = 5000 - margin.left - margin.right,

ताकि कैनवास बहुत व्यापक हो, डेटा सही जगहों पर ठीक और साजिश फिट होगा।

क्या कोई मुझे बता सकता है कि मैं गलत क्या कर रहा हूं और मूल चौड़ाई वाले ग्राफ पर मौजूद सभी डेटा को कैसे फिट कर सकता हूं?

घंटे की लेन-देन के लिए निकालने वाली तारीखों का एक उदाहरण है:

Thu Aug 22 2013 19:19:27 GMT+0100 (BST)
Thu Aug 22 2013 20:00:57 GMT+0100 (BST)
Thu Aug 22 2013 21:00:38 GMT+0100 (BST)
Thu Aug 22 2013 22:00:21 GMT+0100 (BST)
Thu Aug 22 2013 23:00:51 GMT+0100 (BST)
Fri Aug 23 2013 00:00:58 GMT+0100 (BST)
Fri Aug 23 2013 01:00:01 GMT+0100 (BST)
Fri Aug 23 2013 02:00:35 GMT+0100 (BST)
Fri Aug 23 2013 03:00:18 GMT+0100 (BST)
Fri Aug 23 2013 04:00:59 GMT+0100 (BST)
Fri Aug 23 2013 05:00:03 GMT+0100 (BST) 

किसी भी मदद के लिए धन्यवाद

0
हाँ, शायद यह समस्या है, क्या मैं इसके आसपास किसी भी तरह से प्राप्त कर सकता हूं?
जोड़ा लेखक user1138966, स्रोत
मुझे लगता है कि मैं इसे बनाउंगा ताकि उपयोगकर्ता एक समय में केवल एक्स राशि देख सकें। समस्या यह है कि यदि वे उदाहरण के लिए 3 महीने के डेटा को 3 महीने में तुलना करना चाहते हैं। क्या डी 3 सभी डेटा प्लॉट कर सकता है लेकिन फिर उपयोगकर्ता को पैन भरने दें ताकि यह सब एक बार में न देखे?
जोड़ा लेखक user1138966, स्रोत
यह उपयोगी लगता है, धन्यवाद
जोड़ा लेखक user1138966, स्रोत
क्या यह संभव है कि फैलाने के लिए बहुत सारे डेटा पॉइंट हैं?
जोड़ा लेखक Lars Kotthoff, स्रोत
कम डेटा अंक दिखाएं, यानी किसी भी तरह से कुल मिलाकर?
जोड़ा लेखक Lars Kotthoff, स्रोत
क्या आपका मतलब यह जैसा है?
जोड़ा लेखक Lars Kotthoff, स्रोत

कोई जवाब नहीं है

0