Question

对于d3.js来说还是一个新手，但我试图在这里解决Mike Bostock的分组条形图示例：http://bl.ocks.org/mbostock/3887051

问题在于，与示例CSV相比，我的数据排序方式不同，而且我无法正常工作。

示例CSV的示例：

CA,2704659,4499890,2159981,3853788,10604510,8819342,4114496
TX,2027307,3277946,1420518,2454721,7017731,5656528,2472223
NY,1208495,2141490,1058031,1999120,5355235,5120254,2607672

我的CSV示例：

Year, Sex, Cause, Value
1979,Males,Colorectal cancer,20378
1980,Males,Colorectal cancer,20065
1981,Males,Colorectal cancer,20908
1979,Females,Colorectal cancer,19178
1980,Females,Colorectal cancer,18100
1981,Females,Colorectal cancer,17650

在示例CSV中，每组条形图的所有数据都被分类为一行值。而对于我的CSV，他们并没有整齐地组织成一行。

我试图在每个原因下对男性和女性的值进行分组，并按照年份排序：http://i.stack.imgur.com/pU15l.jpg

如果有人能向我解释如何在制作团体条形图时使用这些数据，我们将非常感激。

Answer 1

var valueKeys = ['MALE', 'FEMALE'];

var data = d3.csv.parse(csv)
  .map(function(v)
  {
    d3.keys(v).forEach(function(k)
    {
      if(k != 'CAUSE')
      {
        v[k] = Number(v[k]);
      }
    });
    return v;
  })
  .filter(function(v)
  {
    return v['YEAR'] == 1979;
  })
  .map(function(v)
  {
    // convert data for plotting groups
    v['values'] = valueKeys.map(function(k)
    {
      return {
        'name'  : k,
        'value' : v[k]
      };
    });
    return v;
  });

var margin = {
  'top'    : 20, 
  'right'  : 80, 
  'bottom' : 30, 
  'left'   : 150
};
var width  = 600 - margin['left'] - margin['right'];
var height = 400 - margin['top']  - margin['bottom'];

var y0 = d3.scale.ordinal().rangeRoundBands([0, height], 0.1);
y0.domain(data.map(function(v) 
{ 
  return v['CAUSE']; 
}));

var y1 = d3.scale.ordinal();
y1.domain(valueKeys).rangeRoundBands([0, y0.rangeBand()]);

var x = d3.scale.linear().range([0, width]);
x.domain([0, d3.max(data, function(v) 
{ 
  return d3.max(valueKeys.map(function(k)
  {
    return v[k];
  })); 
})]);

var color = d3.scale.category10();

var yAxis = d3.svg.axis()
  .scale(y0)  
  .orient('left');

var svg = d3.select('#chart').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'] + ')');

svg.append('g')
  .attr('class', 'y axis')
  .call(yAxis);

var cause = svg.selectAll('.cause')
  .data(data)
  .enter()
  .append('g')
  .attr('class', 'g')
  .attr('transform', function(v) 
  { 
    return 'translate(0,' + y0(v['CAUSE']) + ')'; 
  });

cause.selectAll('rect')
  .data(function(v) 
  { 
    return v['values'];
  })
  .enter()
  .append('rect')
  .attr('height', y1.rangeBand())
  .attr('x', 6)
  .attr('y', function(d) 
  { 
    return y1(d['name']); 
  })
  .attr('width', function(d) 
  { 
    return x(d['value']); 
  })
  .style('fill', function(d) 
  { 
    return color(d['name']); 
  });

cause.selectAll('text')
  .data(function(v) 
  { 
    return v['values'];
  })
  .enter()
  .append('text')  
  .attr("x", function(d) { return x(d['value']) + 10; })
  .attr("y", function(d)
  {
    return y1(d['name']) + y1.rangeBand() / 2;
  })
  .attr("dy", ".35em")
  .attr('fill', '#000')
  .text(function(d) { return d['value']; });

body {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

<div id='chart'></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script>
var csv = "YEAR,CAUSE,MALE,FEMALE\n1979,Colorectal cancer,20378,19178\n1979,Lung cancer,63925,21093\n1979,Prostate cancer,6403,43923\n1979,Acute myocardial infarction,161723,45470\n1979,Cerebrovascular diseases,35719,29415\n1979,All stroke,31951,27062\n1979,Unintentional injuries,316585,98160\n1979,Suicides,89943,27078\n1980,Colorectal cancer,20065,18100\n1980,Lung cancer,65650,21993\n1980,Prostate cancer,6180,43938\n1980,Acute myocardial infarction,155525,44623\n1980,Cerebrovascular diseases,32367,28014\n1980,All stroke,28780,25437\n1980,Unintentional injuries,292815,95622\n1980,Suicides,87933,25433\n1981,Colorectal cancer,20908,17650\n1981,Lung cancer,65000,24228\n1981,Prostate cancer,6447,44070\n1981,Acute myocardial infarction,150873,44248\n1981,Cerebrovascular diseases,31559,28782\n1981,All stroke,28504,26482\n1981,Unintentional injuries,286796,86555\n1981,Suicides,89530,25188\n1982,Colorectal cancer,20073,17450\n1982,Lung cancer,67768,26050\n1982,Prostate cancer,6698,45380\n1982,Acute myocardial infarction,142450,41878\n1982,Cerebrovascular diseases,30740,26212\n1982,All stroke,27763,24580\n1982,Unintentional injuries,228691,71820\n1982,Suicides,95460,25090\n1983,Colorectal cancer,20105,16798\n1983,Lung cancer,70178,26495\n1983,Prostate cancer,6973,45133\n1983,Acute myocardial infarction,136817,39900\n1983,Cerebrovascular diseases,30210,26042\n1983,All stroke,27136,24014\n1983,Unintentional injuries,226561,69950\n1983,Suicides,99543,26313\n1984,Colorectal cancer,20028,18280\n1984,Lung cancer,72638,29505\n1984,Prostate cancer,6395,46290\n1984,Acute myocardial infarction,131310,38395\n1984,Cerebrovascular diseases,28820,23353\n1984,All stroke,25950,22043\n1984,Unintentional injuries,216741,67212\n1984,Suicides,92298,23380\n1985,Colorectal cancer,20320,16488\n1985,Lung cancer,70358,32358\n1985,Prostate cancer,8018,49340\n1985,Acute myocardial infarction,125305,37108\n1985,Cerebrovascular diseases,26436,22845\n1985,All stroke,23798,21275\n1985,Unintentional injuries,208342,67774\n1985,Suicides,87815,21313\n1986,Colorectal cancer,21665,17315\n1986,Lung cancer,72562,32635\n1986,Prostate cancer,8598,50790\n1986,Acute myocardial infarction,119969,36320\n1986,Cerebrovascular diseases,26361,23246\n1986,All stroke,24014,21341\n1986,Unintentional injuries,199507,65819\n1986,Suicides,97613,25295\n1987,Colorectal cancer,21128,17323\n1987,Lung cancer,73002,35153\n1987,Prostate cancer,8437,51813\n1987,Acute myocardial infarction,112582,34823\n1987,Cerebrovascular diseases,26209,20540\n1987,All stroke,23974,19117\n1987,Unintentional injuries,208061,66862\n1987,Suicides,95108,24840\n1988,Colorectal cancer,21235,16745\n1988,Lung cancer,73873,35230\n1988,Prostate cancer,8550,50425\n1988,Acute myocardial infarction,107243,32314\n1988,Cerebrovascular diseases,25042,22471\n1988,All stroke,22949,21119\n1988,Unintentional injuries,203150,60174\n1988,Suicides,93940,24675\n1989,Colorectal cancer,21368,15308\n1989,Lung cancer,76002,36683\n1989,Prostate cancer,8428,51648\n1989,Acute myocardial infarction,101850,30230\n1989,Cerebrovascular diseases,25341,21467\n1989,All stroke,23376,20302\n1989,Unintentional injuries,202033,69584\n1989,Suicides,92285,24905\n1990,Colorectal cancer,22580,16640\n1990,Lung cancer,75220,37477\n1990,Prostate cancer,9113,52790\n1990,Acute myocardial infarction,94120,29693\n1990,Cerebrovascular diseases,26362,20108\n1990,All stroke,24280,18736\n1990,Unintentional injuries,186364,60084\n1990,Suicides,92135,23058\n1991,Colorectal cancer,21835,15338\n1991,Lung cancer,76267,40567\n1991,Prostate cancer,9618,51288\n1991,Acute myocardial infarction,91062,28115\n1991,Cerebrovascular diseases,25173,20619\n1991,All stroke,23498,19204\n1991,Unintentional injuries,178329,58707\n1991,Suicides,98460,22808\n1992,Colorectal cancer,21650,16105\n1992,Lung cancer,75032,42660\n1992,Prostate cancer,9068,51418\n1992,Acute myocardial infarction,89067,26055\n1992,Cerebrovascular diseases,23284,19747\n1992,All stroke,20957,18810\n1992,Unintentional injuries,170103,56085\n1992,Suicides,100165,25393\n1993,Colorectal cancer,21808,15925\n1993,Lung cancer,74121,44012\n1993,Prostate cancer,9165,50980\n1993,Acute myocardial infarction,86752,26025\n1993,Cerebrovascular diseases,26339,21014\n1993,All stroke,23941,19480\n1993,Unintentional injuries,175075,62672\n1993,Suicides,101720,24520\n1994,Colorectal cancer,21828,15888\n1994,Lung cancer,73350,44670\n1994,Prostate cancer,9050,54663\n1994,Acute myocardial infarction,82373,25700\n1994,Cerebrovascular diseases,24313,20502\n1994,All stroke,22224,19262\n1994,Unintentional injuries,162066,53766\n1994,Suicides,99790,24818\n1995,Colorectal cancer,22568,16265\n1995,Lung cancer,70405,44150\n1995,Prostate cancer,9365,52433\n1995,Acute myocardial infarction,77342,25295\n1995,Cerebrovascular diseases,24429,19829\n1995,All stroke,22014,18192\n1995,Unintentional injuries,162160,55589\n1995,Suicides,106910,25800\n1996,Colorectal cancer,22145,16878\n1996,Lung cancer,68568,48953\n1996,Prostate cancer,8740,52363\n1996,Acute myocardial infarction,76980,24405\n1996,Cerebrovascular diseases,22680,19186\n1996,All stroke,20583,17743\n1996,Unintentional injuries,146442,50441\n1996,Suicides,101958,26638\n1997,Colorectal cancer,22375,16230\n1997,Lung cancer,67683,45710\n1997,Prostate cancer,8567,50903\n1997,Acute myocardial infarction,75102,22735\n1997,Cerebrovascular diseases,24558,20434\n1997,All stroke,22236,18684\n1997,Unintentional injuries,148627,50720\n1997,Suicides,95100,24088\n1998,Colorectal cancer,21345,17185\n1998,Lung cancer,69095,49668\n1998,Prostate cancer,8558,50393\n1998,Acute myocardial infarction,71618,20355\n1998,Cerebrovascular diseases,22561,19654\n1998,All stroke,20160,17487\n1998,Unintentional injuries,145751,49707\n1998,Suicides,95785,24575\n1999,Colorectal cancer,22950,15910\n1999,Lung cancer,71087,49443\n1999,Prostate cancer,8055,48605\n1999,Acute myocardial infarction,69195,20805\n1999,Cerebrovascular diseases,21353,18915\n1999,All stroke,18404,17110\n1999,Unintentional injuries,150019,53780\n1999,Suicides,104948,25768"
</script>

组织分组条形图的数据

1 个答案: