使用 DC.js D3.js 和 crossfilter.js 按字符串名称分组的简单条形图

【问题标题】：Simple Barchart group by string name with DC.js D3.js & crossfilter.js使用 DC.js D3.js 和 crossfilter.js 按字符串名称分组的简单条形图
【发布时间】：2016-07-13 22:17:38
【问题描述】：

我正在尝试从一些 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;
}),

它确实渲染了图形。但我不知道为什么我不能按州名分组。

谢谢，

【问题讨论】：

    标签： javascript d3.js dc.js crossfilter


    【解决方案1】：

    使用来自here 的帖子我解决了它。

    这里是代码 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>

    还需要的flask文件是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 }

    )

    【讨论】：

      猜你喜欢
      • 2016-11-27
      • 2013-11-23
      • 1970-01-01
      • 2020-11-05
      • 2017-01-27
      • 1970-01-01
      • 2017-12-25
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode