2016-07-13 2 views
0

私は、資金調達額に米国のさまざまな州が与えられているいくつかの単純なデータから棒グラフを作成しようとしています。私はまた、州が繰り返される各州のための総資金を見出したいと思います。 dc.cssがコメントアウトされているため、グラフがうまく見えません。DC.jsの文字列名による単純なBarchartグループD3.js&crossfilter.js

文字列「NY」でグループ化できないという問題が発生しました。しかし、それは別の方法で可能ですか?ここで

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF8"> 
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.min.js"></script> 
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/dc/1.7.5/dc.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js" type="text/javascript"></script> 
    <!-- <link rel="stylesheet" type="text/css" href="../static/css/dc.css" media="screen" /> --> 
</head> 
<body> 
    <div> 
    <h2>Bar Chart</h2></div> 
    <div id="barchart"></div> 
    <script> 
    var data = [{ 
     state: "NJ", 
     fund: 2811.59 
    }, { 
     state: "NC", 
     fund: 449.98 
    }, { 
     state: "NY", 
     fund: 174.53 
    }, { 
     state: "NC", 
     fund: 500.32 
    }, { 
     state: "MD", 
     fund: 420.87 
    }, { 
     state: "OR", 
     fund: 2300.71 
    }, { 
     state: "PA", 
     fund: 360.59 
    }, { 
     state: "NY", 
     fund: 508.91 
    }, { 
     state: "PA", 
     fund: 454.91 
    }, { 
     state: "PA", 
     fund: 357.85 
    }]; 

var fundingBarChart = dc.barChart("#barchart"); 
var ndx = crossfilter(data), 
stateDim = ndx.dimension(function(d) { 
    return d.state; 
}), 
state_funds = stateDim.group().reduceSum(function(d) { 
    return d.fund; 
}); 
fundingBarChart 
    .width(500).height(200) 
    .dimension(stateDim) 
    // .renderArea(true) 
    .x(d3.scale.linear().domain([0, data.length + 1])) 
    .dimension(stateDim) 
    .group(state_funds) 
    .brushOn(true) 
    .legend(dc.legend().x(50).y(10).itemHeight(13).gap(5)) 
    .yAxisLabel("Funding by State") 
    .xAxisLabel("State") 
    .elasticX(true); 

// dc.renderAll(); 
fundingBarChart.render(); 
    </script> 
</body> 
</html> 

は多分これは完全にこれを行うには間違った方法で、すべてのコードです。

EDIT

は、私は少し

var data = [{ 
run: 1, 
state: "NJ", 
fund: 2811.59 
}, { 
run: 2, 
state: "NC", 
fund: 449.98 
}, { 
run: 3, 
state: "NY", 
fund: 174.53 
}, { 
run: 2, 
state: "NC", 
fund: 500.32 
}, { 
run: 4, 
state: "MD", 
fund: 420.87 
}, { 
run: 5, 
state: "OR", 
fund: 2300.71 
}, { 
run: 6, 
state: "PA", 
fund: 360.59 
}, { 
run: 3, 
state: "NY", 
fund: 508.91 
}, { 
run: 6, 
state: "PA", 
fund: 454.91 
}, { 
run: 6, 
state: "PA", 
fund: 357.85 
}]; 

stateDim = ndx.dimension(function(d) { 
// return d.state; 
return d.run; 
}), 

を追加すること、にデータを変更することで動作するようになったし、それはグラフを描画しません。しかし、なぜ私は国家名をグループ化できないのか分かりません。

おかげで、私はそれを解決しhereからのポストを使用して

答えて

0

。ここ

コードのindex.html

<!DOCTYPE html> 
<html> 

<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF8"> 
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.min.js"></script> 
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/dc/1.7.5/dc.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js" type="text/javascript"></script> 
    <link rel="stylesheet" type="text/css" href="../static/css/dc.css" media="screen" /> 
</head> 

<body> 
    <div> 
    <h2>Bar Chart</h2></div> 
    <div id="barchart"></div> 
    <script> 
    var text = '['; 
    var obj; 
    url = "/funding"; 
    d3.json(url, function(error, json_response) { 
     for (var item in json_response['proposals']) { 
     item = parseInt(item); 
     fund = json_response['proposals'][item]['totalPrice']; 
     state = json_response['proposals'][item]['state']; 
     obj = '{ "state":' + '"' + state + '"' + ', "fund":' + fund + '}'; 
     text += obj + ','; 
     } 
     text = text.substring(0, text.length - 1); 
     text += ']'; 
     data = JSON.parse(text); 
     cf = crossfilter(data); 
     fundingBarChart = dc.barChart("#barchart"); 
     stateDim = cf.dimension(function(d) { 
     return d.state; 
     }); 
     fundDim = stateDim.group().reduceSum(function(d) { 
     return d.fund; 
     }); 
     fundingBarChart 
     .dimension(stateDim) 
     .group(fundDim) 
     .x(d3.scale.ordinal().domain(["AK", "AL", "AZ", "AR", "CA", "CO", "CT", "DE", "FL", "GA", "HI", "ID", "IL", "IN", "IA", "KS", "KY", "LA", "ME", "MD", "MA", "MI", "MN", "MS", "MO", "MT", "NE", "NV", "NH", "NJ", "NM", "NY", "NC", "ND", 
      "OH", 
      "OK", "OR", "PA", "RI", "SC", "SD", "TN", "TX", "UT", "VT", "VA", "WA", "WV", "WI", "WY" 
     ])) 
     .xUnits(dc.units.ordinal) 
     .width(1200).height(400) 
     .brushOn(true) 
     .yAxisLabel("Funding by State") 
     .xAxisLabel("State") 
     .elasticX(true) 
     .xAxis().ticks(2); 
     dc.renderAll(); 
    }); 
    </script> 
</body> 

</html> 

も必要フラスコファイルである、services.py

from flask import Flask, Response, render_template 
import json 
import urllib2 

app = Flask(__name__) 

@app.route('/') 
def test(): 
    return render_template('index.html') 

@app.route('/funding') 
def fundingByState(): 
    donors_choose_url = "http://api.donorschoose.org/common/json_feed.html?historical=true&APIKey=DONORSCHOOSE" 
    response = urllib2.urlopen(donors_choose_url) 
    json_response = json.load(response) 
    return json.dumps(json_response) 

if __name__ == '__main__': 
    app.run() 

dc.cssファイル

.dc-chart { 
    float: left; 
} 

.dc-chart rect.bar { 
    stroke: none; 
    cursor: pointer; 
} 

.dc-chart rect.bar:hover { 
    fill-opacity: .5; 
} 

.dc-chart rect.stack1 { 
    stroke: none; 
    fill: red; 
} 

.dc-chart rect.stack2 { 
    stroke: none; 
    fill: green; 
} 

.dc-chart rect.deselected { 
    stroke: none; 
    fill: #ccc; 
} 

.dc-chart .sub .bar { 
    stroke: none; 
    fill: #ccc; 
} 

.dc-chart .pie-slice { 
    fill: white; 
    font-size: 12px; 
    cursor: pointer; 
} 

.dc-chart .pie-slice :hover { 
    fill-opacity: .8; 
} 

.dc-chart .selected path { 
    stroke-width: 3; 
    stroke: #ccc; 
    fill-opacity: 1; 
} 

.dc-chart .deselected path { 
    strok: none; 
    fill-opacity: .5; 
    fill: #ccc; 
} 

.dc-chart .axis path, .axis line { 
    fill: none; 
    stroke: #000; 
    shape-rendering: crispEdges; 
} 

.dc-chart .axis text { 
    font: 10px sans-serif; 
} 

.dc-chart .grid-line { 
    fill: none; 
    stroke: #ccc; 
    opacity: .5; 
    shape-rendering: crispEdges; 
} 

.dc-chart .grid-line line { 
    fill: none; 
    stroke: #ccc; 
    opacity: .5; 
    shape-rendering: crispEdges; 
} 

.dc-chart .brush rect.background { 
    z-index: -999; 
} 

.dc-chart .brush rect.extent { 
    fill: steelblue; 
    fill-opacity: .125; 
} 

.dc-chart .brush .resize path { 
    fill: #eee; 
    stroke: #666; 
} 

.dc-chart path.line { 
    fill: none; 
    stroke-width: 1.5px; 
} 

.dc-chart circle.dot { 
    stroke: none; 
} 

.dc-chart g.dc-tooltip path { 
    fill: none; 
    stroke: grey; 
    stroke-opacity: .8; 
} 

.dc-chart path.area { 
    fill-opacity: .3; 
    stroke: none; 
} 

.dc-chart .node { 
    font-size: 0.7em; 
    cursor: pointer; 
} 

.dc-chart .node :hover { 
    fill-opacity: .8; 
} 

.dc-chart .selected circle { 
    stroke-width: 3; 
    stroke: #ccc; 
    fill-opacity: 1; 
} 

.dc-chart .deselected circle { 
    strok: none; 
    fill-opacity: .5; 
    fill: #ccc; 
} 

.dc-chart .bubble { 
    stroke: none; 
    fill-opacity: 0.6; 
} 

.dc-data-count { 
    float: right; 
    margin-top: 15px; 
    margin-right: 15px; 
} 

.dc-data-count .filter-count { 
    color: #3182bd; 
    font-weight: bold; 
} 

.dc-data-count .total-count { 
    color: #3182bd; 
    font-weight: bold; 
} 

.dc-data-table { 
} 

.dc-chart g.state { 
    cursor: pointer; 
} 

.dc-chart g.state :hover { 
    fill-opacity: .8; 
} 

.dc-chart g.state path { 
    stroke: white; 
} 

.dc-chart g.selected path { 
} 

.dc-chart g.deselected path { 
    fill: grey; 
} 

.dc-chart g.selected text { 
} 

.dc-chart g.deselected text { 
    display: none; 
} 

.dc-chart g.county path { 
    stroke: white; 
    fill: none; 
} 

.dc-chart g.debug rect { 
    fill: blue; 
    fill-opacity: .2; 
} 

.dc-chart g.row rect { 
    fill-opacity: 0.8; 
    cursor: pointer; 
} 

.dc-chart g.row rect:hover { 
    fill-opacity: 0.6; 
} 

.dc-chart g.row text { 
    fill: white; 
    font-size: 12px; 
    cursor: pointer; 
} 

.dc-chart g text { 
    /* Makes it so the user can't accidentally click and select text that is meant as a label only */ 
    -webkit-user-select: none; /* Chrome/Safari */ 
    -moz-user-select: none; /* Firefox */ 
    -ms-user-select: none; /* IE10 */ 
    -o-user-select: none; 
    user-select: none; 
    pointer-events: none; 
} 

.table-cell-center { 
    text-align: center; 
} 

.dc-chart svg { 
    overflow: visible 
} 

fundingBarChart 
    .margins({ top: 10, left: 430, right: 10, bottom: 100 } 

関連する問題