D3.js使用嵌套文件的分組條形圖

Question

我的D3.js JavaScript代碼有問題。 我正在嘗試使用d3.nest()函數匯總我的大型CSV文件，然后從中創建可視化文件。 我正在嘗試制作如下所示的分組條形圖： mbostock的示例 。

但是當我加載它時，頁面上什么都沒有顯示。 分組后的圖表旨在顯示基於模塊的實際和預測的維修值的數量（ module_category ，如以下示例數據所示）：

module_category,component_category,date_repair,actual,predicted,
M1,P06,1/1/2009,39,63,
M1,P06,2009/10,3,4,2009/10/1
M1,P06,2009/11,4,3,2009/11/1
M1,P06,2009/12,4,2,2009/12/1
M1,P06,2009/02,29,45,2009/02/1
M1,P06,2009/03,29,32,2009/03/1
M1,P06,2009/04,10,22,2009/04/1
M1,P06,2009/05,13,15,2009/05/1
M1,P06,2009/06,9,16,2009/06/1
M1,P06,2009/07,7,12,2009/07/1

這是我到目前為止編寫的代碼：

 (function() { var margin = {top: 20, right: 90, bottom: 30, left: 60}, width = 980 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; var x0 = d3.scale.ordinal() .rangeRoundBands([0, width], .1); var x1 = d3.scale.ordinal(); var y = d3.scale.linear() .range([height, 0]); var color = d3.scale.category10(); var xAxis = d3.svg.axis() .scale(x0) .orient("bottom"); var yAxis = d3.svg.axis() .scale(y) .orient("left") .tickFormat(d3.format(".2s")); var svg = d3.select("#maincontent").append("svg") .attr('width', width + margin.right + margin.left) .attr('height', height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); var tip=d3.tip() .attr("class","d3-tip") .offset([-10, 0]) .html(function(d) { return "No. of repairs: " + d.value; }); d3.csv("data/Consolidated_result.csv", function(error, data) { if (error) throw error; data = d3.nest() .key(function(d) { return d.module_category;}) .rollup(function(values){ var counts = {}, keys = ['actual', 'predicted'] keys.forEach(function(key){ counts[key] = d3.sum(values, function(d){ return d[key]}) }) return counts }) .entries(data); console.log(data); x0.domain(data.map(function(d) { return d.key; })); x1.domain(d3.keys(data)).rangeRoundBands([0, x0.rangeBand()]); y.domain([0, d3.max(data, function(d) { return d3.max(d.values, function(d) { return d.values.length; }); })]); svg.call(tip); svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis); svg.append("g") .attr("class", "y axis") .call(yAxis) .append("text") .attr("transform", "rotate(-90)") .attr("y", 0 - margin.left) .attr("x", 0 - (height / 2)) .attr("dy", "1em") .style("text-anchor", "middle") .text("Number of Repairs"); var module = svg.selectAll(".module") .data(data, function(d){ return d.values; }) .enter().append("g") .attr("class", "g") .attr("transform", function(d) { return "translate(" + x0(d.key) + ",0)"; }); module.selectAll("rect") .data(data) .enter().append("rect") .attr("width", x1.rangeBand()) .attr("x", function(d) { return x1(d.key); }) .attr("y", function(d) { return y(d.values); }) .attr("height", function(d) { return height - y(d.values); }) .style("fill", function(d) { return color(d.key); }); var legend = svg.selectAll(".legend") .data(d3.keys(data).slice().reverse()) .enter().append("g") .attr("class", "legend") .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; }); legend.append("rect") .attr("x", width - 18) .attr("width", 18) .attr("height", 18) .style("fill", color); legend.append("text") .attr("x", width - 24) .attr("y", 9) .attr("dy", ".35em") .style("text-anchor", "end") .text(function(d) { return d; }); }); } 

我還嘗試向圖表添加交互性，以允許用戶在單擊模塊時查看與模塊相關的組件。 下圖是我要制作的理想圖表：

Answer 1

您的代碼中的一些問題：

問題1 ：CSV不正確，實際和預測數據中包含日期：

module_category,component_category,date_repair,actual,predicted,
M1,P06,1/1/2009,39,63,
M1,P06,2009/10,3,4,2009/10/1
M1,P06,2009/11,4,3,2009/11/1
M1,P06,2009/12,4,2,2009/12/1

本來應該：

module_category,component_category,date_repair,actual,predicted
M1,P06,1/1/2009,39,63
M2,P06,2009/10/1,3,4
M3,P06,2009/10/1,30,40

問題2 ：x1的域錯誤。 您的代碼：

x1.domain(d3.keys(data)).rangeRoundBands([0, x0.rangeBand()]);

這里d3.keys(data)是未定義的

本來應該

x1.domain(['actual', 'predicted']).rangeRoundBands([0, x0.rangeBand()]);

問題3 ：y的域錯誤。 您的代碼：

 y.domain([0, d3.max(data, function(d) { return d3.max(d.values, function(d) { return d.values.length; }); })]);

本來應該

//store all the values in array
var yval = [];
    data.forEach(function(d) {
      yval.push(d.values.actual);
      yval.push(d.values.predicted);
    });
 //then do max on that
y.domain([0, d3.max(yval)]);

問題4 ：數據集不正確。

 module.selectAll("rect")
        .data(data) //you are passing an object but it should be an array
      .enter().append("rect")

本來應該

module.selectAll("rect")
  .data(function(d) {
    var ary = [];
    ary.push({name:"actual", value:d.values.actual});
    ary.push({name:"predicted", value:d.values.predicted});
    return ary;
  })

這里的工作代碼

希望這可以幫助！