1

以下の形式の csv 形式のデータがあります。これは、都市を x 軸、人口を y 軸として、年に積み上げた d3 積み上げ棒グラフに表示されます。

Country City Year Population

US     Dallas 2010 1000
US     Dallas 2011 1200
UK     London 2010 700
UK     London 2011  850
US     Chicago  2010 1250
US     Chicago  2011  1300

国ドロップダウンを作成し、選択した国のチャートに関連データのみを表示したいと考えています。

以下は、script タグ内のコード スニペットです。

  var outerWidth = 500;
  var outerHeight = 250;
  var margin = { left: 90, top: 30, right: 30, bottom: 40 };
  var barPadding = 0.2;
  var xColumn = "City";
  var yColumn = "Population";
  var colorColumn = "Year";
  var layerColumn = colorColumn;
  var innerWidth  = outerWidth  - margin.left - margin.right;
  var innerHeight = outerHeight - margin.top  - margin.bottom;
  var svg = d3.select("body").append("svg")
    .attr("width",  outerWidth)
    .attr("height", outerHeight);
  var g = svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  var xAxisG = g.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + innerHeight + ")");
  var yAxisG = g.append("g")
    .attr("class", "y axis");
  var xScale = d3.scale.ordinal().rangeBands([0, innerWidth], barPadding);
  var yScale = d3.scale.linear().range([innerHeight, 0]);
  var colorScale = d3.scale.category10();
  // Use a modified SI formatter that uses "B" for Billion.
  var siFormat = d3.format("s");
  var customTickFormat = function (d){
    return siFormat(d).replace("G", "B");
  };
  var xAxis = d3.svg.axis().scale(xScale).orient("bottom")
    .outerTickSize(0);
  var yAxis = d3.svg.axis().scale(yScale).orient("left")
    .ticks(5)
    .tickFormat(customTickFormat)
    .outerTickSize(0);
  function render(data){
    var nested = d3.nest()
      .key(function (d){ return d[layerColumn]; })
      .entries(data)
    var stack = d3.layout.stack()
      .y(function (d){ return d[yColumn]; })
      .values(function (d){ return d.values; });
    var layers = stack(nested);
    xScale.domain(layers[0].values.map(function (d){
      return d[xColumn];
    }));
    yScale.domain([
      0,
      d3.max(layers, function (layer){
        return d3.max(layer.values, function (d){
          return d.y0 + d.y;
        });
      })
    ]);
    colorScale.domain(layers.map(function (layer){
      return layer.key;
    }));
    xAxisG.call(xAxis);
    yAxisG.call(yAxis);
    var layerGroups = g.selectAll(".layer").data(layers);
    layerGroups.enter().append("g").attr("class", "layer");
    layerGroups.exit().remove();
    layerGroups.style("fill", function (d){
      return colorScale(d.key);
    });
    var bars = layerGroups.selectAll("rect").data(function (d){
      return d.values;
    });
    bars.enter().append("rect")
    bars.exit().remove();
    bars
      .attr("x", function (d){ return xScale(d[xColumn]); })
      .attr("y", function (d){ return yScale(d.y0 + d.y); })
      .attr("width", xScale.rangeBand())
      .attr("height", function (d){ return innerHeight - yScale(d.y); })
  }
  function type(d){
    d.Population = +d.Population;
    return d;
  }
  d3.csv("data.csv", type, render);

[フィドル リンク] ( https://jsfiddle.net/GM71819/tcabb1ch/ )

私が直面している課題は次のとおりです。1.ドロップダウンに国フィールドから国名を動的に入力します。2. ドロップダウンでユーザーが選択した後、データをグラフにバインドします。

どんな助けでも大歓迎です。

4

1 に答える 1

1

次の質問が役立つと思います。

DC、D3、および Crossfilter を使用してデータをフィルター処理し、棒グラフを作成する方法は?

この：

D3 で積み上げ棒グラフのデータを更新する方法

コンボを使用したフィルタリングの例: http://jsfiddle.net/eL2XG/8/

var e = document.getElementById("combo");
var selection = e.options[e.selectedIndex].value;  
FilterDimension.filter(selection);
于 2016-02-16T12:53:01.473 に答える