D3.js 图表之间的转换答案

【问题标题】：D3.js transitions between chartsD3.js 图表之间的转换
【发布时间】：2015-11-16 15:26:12
【问题描述】：

我正在尝试在我的条形图代码中创建一个转换，这将允许用户单击特定并显示与该条相关的一组不同的数据。

这是一个示例数据集：

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

完整的数据集可以在这里找到：full dataset

所以根据我当前的代码，我可以创建这个条形图：

但现在我想添加交互性，允许用户在单击“M2”等栏后，他们绘制图表然后更新以显示与该模块相关的“component_category”中的组件以及相应的“实际”和“预测”值也显示为条形图。

这是我当前的代码：

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('id','chart')
    .attr('viewBox', '0 0 980 500')
    .attr('perserveAspectRatio', 'xMinYMid')
    .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;}).sortKeys(d3.ascending)
    .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(['actual','predicted']).rangeRoundBands([0, x0.rangeBand()]);
  // store all the values in an array
  var yval = [];
    data.forEach(function(d){
        yval.push(d.values.actual);
        yval.push(d.values.predicted);
    });
  y.domain([0, d3.max(yval)]);

  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)
    .enter().append("g")
      .attr("class", "g")
      .attr("transform", function(d) { return "translate(" + x0(d.key) + ",0)"; });

  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;
      })
    .enter().append("rect")
        .on('mouseover', tip.show)
        .on('mouseout', tip.hide)
      .on("click", function(d){
        d3.select("svg")
            .style("opacity",0)
            .remove()
            tip.hide()
            setTimeout(componentgroupedchart, 1000);
      })
        /*
      .on("click", function(d){
        d3.select(this)
            setTimeout(updateChart(name), 500);
        })*/
      .attr("width", x1.rangeBand())
      .attr("x", function(d) { return x1(d.name); })
      .attr("y", function(d) { return y(d.value); })
      .attr("height", function(d) { return height - y(d.value); })
      .style("fill", function(d) { return color(d.name); });

  var legend = svg.selectAll(".legend")
      .data(['actual','predicted'])
    .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", function(d){
        return color(d)
      });

  legend.append("text")
      .attr("x", width - 24)
      .attr("y", 9)
      .attr("dy", ".35em")
      .style("text-anchor", "end")
      .text(function(d) { return d; });


});

我想要实现的是创建一个函数，我可以在其中更新图表并重新加载数据并将其嵌套到此：

 data = d3.nest()
    .key(function(d) { return d.module_category;}).sortKeys(d3.ascending)
    .key(function(d) { return d.component_category;}).sortKeys(d3.ascending)
    .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);

这样我就可以访问每个模块：

与该模块相关的组件数量 &
实际和预测的修复值

然后生成的数据变成：

var data = [{
   key: "M1"
   values: {
      key: "P06"
      values: {
        actual: 156 ,
        predicted: 228
      },
      key: "P09"
      values: {
        actual: 31,
        predicted: 20
      },
      key: "P12"
      values: {
        actual: 140,
        predicted: 176
      },
      key: "P15"
      values: {
        actual: 38,
        predicted: 40
      },
      key: "P16"
      values: {
        actual: 112,
        predicted:113
      },
      key: "P17"
      values: {
        actual: 20 ,
        predicted: 7
      },
      key: "P20"
      values: {
        actual: 98,
        predicted: 127
      },
      key: "P28"
      values: {
        actual: 143 ,
        predicted: 149
      },
      key: "P30"
      values: {
        actual: 16,
        predicted: 38
      }
  },
  key: "M5"
  values: {
      key: "P06"
      values: {
        actual: 61 ,
        predicted: 65
      },
      key: "P09"
      values: {
        actual: 83,
        predicted: 82
      },
      key: "P12"
      values: {
        actual: 45,
        predicted: 58
      },
      key: "P15"
      values: {
        actual: 26,
        predicted: 31
      },
      key: "P16"
      values: {
        actual: 152,
        predicted:174
      },
      key: "P21"
      values: {
        actual: 74 ,
        predicted: 120
      }
   }
}]

然后，图表会根据这些新数据转换为新的条形图显示，该条形图显示基于所选模块的组件及其维修值。我希望这个问题现在更清楚了。

【问题讨论】：

你的数据集不清楚你有一个像这样的记录 M1,P06,2009/01,39,63 所以当你点击 M1 时它会显示 P06？数据集中没有 M2..
您好，很抱歉，我已将完整的数据集放在这里：link
您的 M1 数据具有 component_category 的多个值，有时它的 p12 有时 p16，它们都有不同的实际值、预测值 M1、P12、2009/01、35、40 M1、P12、2009/10 ,3,4 M1,P12,2009/11,2,3 M1,P16,2009/04,9,12 M1,P16,2009/05,10,9 等等向下钻取应该显示哪些值...可以你在你的问题上澄清这一点，以便对可能回答它的人有所帮助。
好的，现在编辑问题

标签： javascript d3.js charts

【解决方案1】：

这可以通过使一个函数用于制作模块图，另一个用于制作向下钻取类别图来实现。在函数中定义定义域，因为y轴域x轴域会随着模块/类别图的变化而变化。

我在代码中添加了 cmets；如果您有任何问题，请随时提出。

  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("body").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("my.csv", function(error, data) {
    if (error) throw error;
    fullData = data;
    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);
      //make the x axis
    svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);
      //make the y axis
    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");

    makeModuleGraph(data)

    var legend = svg.selectAll(".legend")
      .data(['actual', 'predicted'])
      .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", function(d) {
        return color(d);
      });

    legend.append("text")
      .attr("x", width - 24)
      .attr("y", 9)
      .attr("dy", ".35em")
      .style("text-anchor", "end")
      .text(function(d) {
        return d;
      });
  });

  function makeModuleGraph(data) {
    var yval = [];
    data.forEach(function(d) {
      yval.push(d.values.actual);
      yval.push(d.values.predicted);
    });
    x0.domain(data.map(function(d) {
      return d.key;
    }));
    x1.domain(['actual', 'predicted']).rangeRoundBands([0, x0.rangeBand()]);

    y.domain([0, d3.max(yval)]);

    svg.call(tip);

    svg.selectAll("g .x")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

    svg.selectAll("g .y")
      .attr("class", "y axis")
      .call(yAxis);

    var module = svg.selectAll(".module")
      .data(data)
      .enter().append("g")
      .attr("class", "module")
      .attr("transform", function(d) {
        return "translate(" + x0(d.key) + ",0)";
      });

    module.selectAll("rect")
      .data(function(d) {
        var ary = [];
        ary.push({
          name: "actual",
          value: d.values.actual,
          key: d.key
        });
        ary.push({
          name: "predicted",
          value: d.values.predicted,
          key: d.key
        });
        return ary;
      })
      .enter().append("rect")
      .attr("width", x1.rangeBand())
      .attr("x", function(d) {
        return x1(d.name);
      })
      .attr("y", function(d) {
        return y(d.value);
      })
      .attr("height", function(d) {
        return height - y(d.value);
      })
      .style("fill", function(d) {
        return color(d.name);
      }).on("click", function(d) {
        makeComponentCategoryGraph(d);//make the graph for category
      });

  }

  function makeComponentCategoryGraph(d){
    var filtered = fullData.filter(function(k){ if(d.key == k.module_category){return true;}else {return false;}})
    var data = d3.nest()
      .key(function(d) {
        return d.component_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(filtered);
          var yval = [];
    data.forEach(function(d) {
      yval.push(d.values.actual);
      yval.push(d.values.predicted);
    });
    x0.domain(data.map(function(d) {
      return d.key;
    }));
    x1.domain(['actual', 'predicted']).rangeRoundBands([0, x0.rangeBand()]);

    y.domain([0, d3.max(yval)]);

    svg.call(tip);

    svg.selectAll("g .x")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

    svg.selectAll("g .y")
      .attr("class", "y axis")
      .call(yAxis);
    svg.selectAll(".module").remove();//remove alll the bar graphs
    var module = svg.selectAll(".module")
      .data(data)
      .enter().append("g")
      .attr("class", "module")
      .attr("transform", function(d) {
        return "translate(" + x0(d.key) + ",0)";
      });

    module.selectAll("rect")
      .data(function(d) {
        var ary = [];
        ary.push({
          name: "actual",
          value: d.values.actual,
          key: d.key
        });
        ary.push({
          name: "predicted",
          value: d.values.predicted,
          key: d.key
        });
        return ary;
      })
      .enter().append("rect")
      .attr("width", x1.rangeBand())
      .attr("x", function(d) {
        return x1(d.name);
      })
      .attr("y", function(d) {
        return y(d.value);
      })
      .attr("height", function(d) {
        return height - y(d.value);
      })
      .style("fill", function(d) {
        return color(d.name);
      })
  }

工作代码here.

【讨论】：

是的，这就是我要找的 :)。非常感谢。使用 filter 函数来比较 module_category 是我的想法，但无法将其可视化。再次感谢