使用jQuery和dc.js在d3.js中出错

时间:2015-07-21 10:44:55

标签: javascript jquery d3.js dc.js

我是编程新手,我正在尝试实现一个搜索按钮,可以让我过滤数据。
我在我的serv上有一个url / tweets_complet的JSON数据。然后我想得到另一个JSON,它取决于搜索按钮的输入。一旦我有两个JSON,我就编写了一些代码,我认为这些代码并不重要。

这是js代码:

function main(){
    $.getJSON("/tweets_complet", insererDonneesJson);}


function insererDonneesJson(data){
    $('button').on('click', get_data);

    function get_data() {
        var cashtagg=$('#cash').val();
        $.getJSON("/"+cashtagg, filter);

        function filter(data2) {

    //Tweets datas
            var tweets = data;
            var dateFormat = d3.time.format("%Y-%m-%d %H:%M:%S");
            tweets.forEach(function(d) {
                d["cleandate"] = dateFormat.parse(d["cleandate"]);
                d["cleandate"].setSeconds(0);
            });

            //Create a Crossfilter instance
            var ndx = crossfilter(tweets);

            //Define Dimensions
            var cleandateDim = ndx.dimension(function(d) { return d["cleandate"]; });
            var sentimentDim=ndx.dimension(function(d) { return d["sentiment"]; });
            var bnscoreDim=ndx.dimension(function(d) { return d["bnscore"]; });
            var tickerDim=ndx.dimension(function(d) { return d["collection_name"];});
            var newTickerDim = tickerDim.filter(cashtagg);


            //Calculate metrics
            var numTweetsByTicker=newTickerDim.group()
            var numTweetsByDate = cleandateDim.group(); 
            var numTweetsByBnscore = bnscoreDim.group();
            var totalScoreByDate = cleandateDim.group().reduceSum(function(d) {
                return d["sentiment"]*10/(numTweetsByDate.size());})

            var all = ndx.groupAll();
            var numTweetsBySentiment = sentimentDim.group();



            //Define values (to be used in charts)
            var minDate = cleandateDim.bottom(1)[0]["cleandate"];
            var maxDate = cleandateDim.top(1)[0]["cleandate"];




    //Datas cashtag


            var datas = data2;
            var dateFormatO = d3.time.format("%Y-%m-%d");
            datas.forEach(function(d) {
                d["Date"] = dateFormatO.parse(d["Date"]);
            });


        // Create a Crossfilter instance
            var ndxO = crossfilter(datas);

        // Define Dimensions
            var dateDimO = ndxO.dimension(function(d) { return d["Date"]; });
            var volumeDimO=ndxO.dimension(function(d) { return d["Volume"]; });
            var scoreDimO=ndxO.dimension(function(d) { return d["Low"]; });



        // Calculate metrics

            var groupeVolumeO = dateDimO.group().reduceSum(function(d) { return d["Volume"]/10000000;}); 
            var groupeScoreO = dateDimO.group().reduceSum(function(d) { return d["Low"];}); 


            var allO = ndxO.groupAll();


        // Define values (to be used in charts)
            var minDateO = dateDimO.bottom(1)[0]["Date"];
            var maxDateO = dateDimO.top(1)[0]["Date"];

            var minVolumeO = (volumeDimO.bottom(1)[0]["Volume"])/10000000;
            var maxVolumeO = (volumeDimO.top(1)[0]["Volume"])/10000000;

            var minScoreO = scoreDimO.bottom(1)[0]["Low"];
            var maxScoreO = scoreDimO.top(1)[0]["Low"];





    //Charts
            var timeChart = dc.barChart("#time-chart");
            var pieChart= dc.pieChart("#pie-chart")
            var numberTweetsND = dc.numberDisplay("#number-tweets-nd");
            var hitslineChart  = dc.lineChart("#chart-line-hitsperday"); 
            var shareChart = dc.lineChart("#share-chart");
            var volumeChart = dc.lineChart("#volume-chart");



            numberTweetsND
                .formatNumber(d3.format("d"))
                .valueAccessor(function(d){return d; })
                .group(all);


        timeChart
            .width(800)
            .height(160)
            .margins({top: 10, right: 50, bottom: 30, left: 50})
            .dimension(cleandateDim)
            .group(numTweetsByDate)
            .transitionDuration(500)
            .x(d3.time.scale().domain([minDate, maxDate]))
            .elasticY(true)
            .xAxisLabel("Day")
            .yAxis().ticks(8);

            pieChart.width(350)
            .height(330)
            .dimension(sentimentDim)
            .group(numTweetsBySentiment)
            .colors(['red','black','green']);

    hitslineChart
        .width(600).height(330)
        .dimension(cleandateDim)
        .group(totalScoreByDate)
        .x(d3.time.scale().domain([minDate,maxDate])); 

    volumeChart
        .width(800).height(330)
        .dimension(dateDimO)
        .group(groupeVolumeO)
        .x(d3.time.scale().domain([minDateO,maxDateO]));
        // .y(d3.scale.linear().domain([minVolumeO,maxVolumeO])); 

    shareChart
        .width(800).height(330)
        .dimension(dateDimO)
        .group(groupeScoreO)
        .x(d3.time.scale().domain([minDateO,maxDateO]));
        // .y(d3.scale.linear().domain([minScoreO,maxScoreO])); 


    dc.renderAll();

}}};
$(document).on('ready', main);

HTML代码:

<!DOCTYPE html>
<html>
<head>
  <title>Dashboard</title>
  <link rel="stylesheet" href="./static/lib/css//bootstrap.min.css">
  <link rel="stylesheet" href="./static/lib/css/keen-dashboards.css">
  <link rel="stylesheet" href="./static/lib/css/dc.css">
  <link rel="stylesheet" href="./static/css/custom.css">


</head>

<body class="application">

  <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="./">InTwittiv</a>
      </div>
    <div>
      <ul class="nav navbar-nav">
        <li class="active"><a href="./choix">Description</a></li>
        <li><a href="./analyse">Analyse</a></li>

      </ul>
    <div class="collapse navbar-collapse navbar-ex1-collapse">
        <!-- <a href="#" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-search"></span> 
          <div class="col-sm-10">          
        <input type="text" class="form-control" id="cashtag" placeholder="Cashtag">
      </div>
        </a> -->
        <div class="col-sm-3 col-md-3 pull-right">
         <div class="form-group">
                    <input id="cash" type="text" placeholder="Change Cashtag here" >
                    <button class="btn btn-sm btn-success">Chercher</button>
                </div>
        </div>
        </div>
        </div>
                </div>

                        </div>






  <div class="container-fluid">

    <div class="row">

      <div class="col-sm-6">
        <div class="row">


          <div class="col-sm-12">
            <div class="chart-wrapper">
              <div class="chart-title">
                Tweet Volume
              </div>
              <div class="chart-stage">
                <div id="time-chart"></div>
              </div>
            </div>
          </div>

          <div class="col-sm-6">
            <div class="chart-wrapper">
              <div class="chart-title">
                Sentiment repartition
              </div>
              <div class="chart-stage">
                <div id="pie-chart"></div>
              </div>
            </div>
          </div>

          <div class="col-sm-6">
            <div class="chart-wrapper">
              <div class="chart-title">
                Sentiment repartition
              </div>
              <div class="chart-stage">
                 <div id="chart-line-hitsperday"></div>
              </div>
            </div>
          </div>

         <div class="col-sm-3">
            <div class="chart-wrapper">
              <div class="chart-title">
                Total nb of tweets
              </div>
              <div class="chart-stage">
                    <div id="number-tweets-nd"></div>
              </div>
            </div>
          </div>
      </div>

     </div>


     <div class="col-sm-6">
        <div class="row">

          <div class="col-sm-12">
            <div class="chart-wrapper">
              <div class="chart-title">
                Volume (*10^6)
              </div>
              <div class="chart-stage">
                <div id="volume-chart"></div>
              </div>
            </div>
          </div>

          <div class="col-sm-12">
            <div class="chart-wrapper">
              <div class="chart-title">
                Share Price
              </div>
              <div class="chart-stage">
                <div id="share-chart"></div>
              </div>
            </div>
          </div>


      </div>

    </div>

  </div>
    </div>





    <hr>
    <p class="small text-muted">Built by <a href="http://keyruscapitalmarkets.com/">Keyrus Capital Markets</a></p>

  </div>

  <script src="http://code.jquery.com/jquery.min.js"></script>
  <script src="./static/lib/js/bootstrap.min.js"></script>
  <script src="./static/lib/js/crossfilter.js"></script>
  <script src="./static/lib/js/d3.js"></script>
  <script src="./static/lib/js/dc.js"></script>
  <script src="./static/lib/js/queue.js"></script>

  <script src="./static/lib/js/d3.layout.cloud.js"></script>
  <script src="./static/lib/js/keen.min.js"></script>
  <script src='./static/js/graph2.js' type='text/javascript'></script>
</body>
</html>

当我运行serv时,我可以在输入中输入一个值(例如FB)并且它可以工作。但是,从这里开始,我无法将“现金”值更改为AAPL之类的其他内容,因为我收到了错误 未捕获的TypeError:undefined不是函数
    d3.js:2716

这一行是:
 var n = d3_time_numberRe.exec(string.slice(i,i + 4));

由于我不熟悉$和按钮,我不知道问题的原因...... 任何帮助将不胜感激:)

0 个答案:

没有答案