0
json 형식의 간단한 데이터에서 막 대형 차트를 만들려고합니다. 여기에는 미국의 여러 주에서 자금이 제공됩니다. 또한 주정부가 반복되는 각 주에 대한 총 기금을 찾고 싶습니다. 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>
어쩌면이 완전히이 작업을 수행하는 잘못된 방법입니다, 모든 코드입니다.
편집 I가 데이터를 조금 변경하여 일을 가지고
,
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에서 게시물을 사용
감사합니다,