1

私は初めて D3 を掘り下げており、時間の経過に伴う食品の消費に関する調査を視覚化するために、棒グラフの小さな倍数を作成しようとしています。オンラインでいくつかの例を使用して、面グラフをうまく機能させることができました。しかし、棒グラフの方がデータをよりよく理解できます。これまでのコードはほとんど機能しているように感じますが、明らかに何かが欠けています。ヒントや支援は素晴らしいでしょう。

例として、これが私の .csv ファイルのスニペットです。

group,date,totals
acid,1641,8438
bird,1641,12
cheese,1641,22
cured meat,1641,506
dried fish,1644,158
fresh fish,1644,1196
meat,1644,140
brined/pickled fish,1645,2844
salt,1645,4382
...

これまでのコード:

<script type="text/javascript">

var margin = {top: 20, right: 30, bottom: 30, left: 40},
    width = 500 - margin.right - margin.left,
    height = 150 - margin.top - margin.bottom,
    parse = d3.time.format("%Y").parse;

// scales
var x = d3.time.scale().range([0, width]),
    y = d3.scale.linear().range([height, 0]);

// for the area charts example, an area generator
var area = d3.svg.area()
    .interpolate("monotone")
    .x(function(d) { return x(d.date); })
    .y0(height)
    .y1(function(d) { return y(d.totals); });

// for the area charts example, a line generator
var line = d3.svg.line()
    .interpolate("monotone")
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.totals); });

// load data
d3.csv("revised.csv", function(error, data) {

  // nest values by group
  var groups = d3.nest()
      .key(function(d) { return d.group; })
      .entries(data);

  // parse dates and numbers, assume values are sorted by date
  // compute the maximum totals per group
  groups.forEach(function(s) {
    s.values.forEach(function(d) { d.date = parse(d.date); d.totals = +d.totals; });
    s.maxtotals = d3.max(s.values, function(d) { return d.totals; });
  });

  // compute the minimum and maximum date across groups
  x.domain([
    d3.min(groups, function(s) { return s.values[0].date; }),
    d3.max(groups, function(s) { return s.values[s.values.length - 1].date; })
  ]);
  y.domain([0, d3.max(data, function(d) { return d.totals; })]);

  // add an SVG element for each group
  var svg = d3.select("body").selectAll("g")
      .data(groups)
    .enter().append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
    .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  // print x axis
  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.svg.axis().scale(x).orient("bottom"));
  // print y axis
  svg.append("g")
      .attr("class", "y axis")
      .call(d3.svg.axis().scale(y).orient("left"));

    // Trying here to render my bar charts. 
    // -----------------------------------
    svg.selectAll(".bar")
       .data(groups)
     .enter().append("rect")
       .attr("x", x)
       .attr("y", function(d) { return d.maxtotals; })
       .attr("width", width / groups.length)
       .attr("height", function(d) { return d.maxtotals; });

// These are the area charts, that work. Commented out for now.
  //svg.append("path")
  //    .attr("class", "area")
  //    .attr("d", function(d) { y.domain([0, d.maxtotals]); return area(d.values); });

  //svg.append("path")
  //    .attr("class", "bar")
  //    .attr("d", function(d) { y.domain([0, d.maxtotals]); return line(d.values); });


  // Add a small label for the group name.
  svg.append("text")
      .attr("x", width - 6)
      .attr("y", height - 6)
      .attr("text-anchor", "end")
      .text(function(d) { return d.key; });
});

</script>

現時点では、面グラフは次のようになっています (上記のコードはこれらの外観を変更していますが、アイデアが得られます)。

スクリーングラブ

ポインタはありますか？私は何を見落としていますか？お早めにどうぞ！

4

2 に答える 2

1

最初に思いつくのは、とアトリビュートの両方にyスケールを適用しておらず、アトリビュートを適切にスケーリングしていないことです。これらの属性値を決定する方法により、既に返されている値にスケールを適用するのと同じくらい簡単なはずです。将来的には、これは一般的に機能しない可能性があることに注意してください。d.maxtotals"y""height""width"

"y"もう 1 つの問題は、おそらく属性がデータに関連付けられることをまったく意図していないことです。それがさん"height"の仕事です。"y"x軸に与えているのと同じy座標に属性を設定します。

于 2013-03-28T18:41:55.047 に答える