Question

我正在尝试使用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;
}),

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

谢谢，

Answer 1

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

以下是代码index.html

element.innerHTML = '<div class="my-div">hey</div>';

还需要使用flask文件，services.py

<!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>

dc.css文件

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.js D3.js＆amp ;; crossfilter.js

1 个答案: