简单条形图按字符串名称分组，带有 DC.js D3.js 和交叉过滤器.js
Simple Barchart group by string name with DC.js D3.js & crossfilter.js
我正在尝试从一些json格式的简单数据创建一个条形图，其中给出了美国各州的资金金额。我还想找到重复状态的每个州的总资金。我知道图表看起来不太好，因为 dc.css 被注释掉了。
我现在看到问题是我不能按字符串（即"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>
也许这完全是错误的方法。
编辑
我开始工作，将数据更改为，
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;
}),
它确实呈现了图形。但我不知道为什么我不能对州名进行分组。
谢谢
使用这里的帖子我解决了它。
下面是代码索引.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()
直流.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 }
）
相关文章：
- 如何在d3.js中返回路径的y坐标
- 有条件更新d3.js力图中节点的最佳方法
- 使用D3.js计算带有字母间距的文本长度
- D3.js模式不适用于弧形或圆环图
- d3.js Chord图的动态工具提示
- 在D3.js中，有没有任何方法可以将x和y方向上的滚动事件绑定到平移svg
- HTML5FileReader输出到D3.js图表
- D3.js生成有效的SVG，但不显示任何内容
- 更改 JS/D3 页上的元素位置
- 带有更新按钮.js D3 将新数据添加到旧数据而不是替换旧数据
- D3.js d3.max undefined
- 为什么我的 js.d3 代码不显示轴
- dc.js d3+crossfilter.top将过滤后的数据导出为CSV
- 如何在Plottable.js/D3.js制作的饼图中启用qtip2
- 2dimple.js/d3.js在窗口大小更改时自动调整图表大小
- D3.js D3.json返回Uncaught TypeError:无法读取属性'0'的未定义
- 如何计算(SVG) X/Y坐标的平移和旋转(在JS/D3.js)
- 当我们需要信任大约 200-300 个自定义图表时.js D3 是最佳选择吗?
- 简单条形图按字符串名称分组，带有 DC.js D3.js 和交叉过滤器.js
- 缺少标签- Cola.js/D3.js
