javascript - 想在同一页面的 d3 中为不同的数据集生成多个图表

Question

我正在查询数据库并将结果添加到 json 文件中，并尝试为同一页面中的每条记录生成图表。

这是我查询 mySql 数据库生成的 JSON 数据集(单个文件中的所有记录)。现在我想为每条记录生成图表(条形图或饼图就足够了)。这可能吗？

[
//record1
    {"ProductType1":"999999","value1":"99"},
    {"ProductType1":"88888","value1":"88"},
    {"ProductType1":"77777","value1":"77"},
    {"ProductType1":"999999","value1":"99"},
//record 2
    {"ProductType":"132023","value":"144"},
    {"ProductType":"132030","value":"275"},
    {"ProductType":"132053","value":"42"},
    {"ProductType":"132093","value":"1"},
    {"ProductType":"132197","value":"94"},
//record 3
    {"ProductType2":"132207","value2":"23"},
    {"ProductType2":"304055","value2":"51"},
    {"ProductType2":"520002","value2":"27"},
    {"ProductType2":"522275","value2":"34"}
]

Or please suggest some other workarounds to get this done

Answer 1

我会按照以下步骤完成。

• 首先为您的数据数组创建一个键值映射。(如果键值名称具有规则模式，您可以从数据数组动态生成它)

  var keyMap = [{ 类别:'产品类型'， 值(value):“值(value)” }, { 类别:“流程类型”， 值(value):“错误计数” }, { 类别:“消息”， 值:'计数' }];

• 将对象数组格式的现有数据转换为数组数组格式。

  var formattedData = d3.nest() .key(function(d) { return Object.keys(d)[0]; }) .条目(数据) .map(function(d){ return d.values });

• 创建键映射后，您可以遍历数据数组并创建图表，如下面的代码片段所示。

• 根据循环内的要求计算图表位置，并相应地放置 SVG。

这是一个示例代码片段。

var width = 300,
  height = 155,
  radius = Math.min(width, height) / 3;

var keyMap = [{
  category: 'ProductType1',
  value: 'value1'
}, {
  category: 'ProductType',
  value: 'value'
}, {
  category: 'ProductType2',
  value: 'value2'
}];

var data =[
    {"ProductType1":"999999","value1":"99"},
    {"ProductType1":"88888","value1":"88"},
    {"ProductType1":"77777","value1":"77"},
    {"ProductType1":"999999","value1":"99"},
    {"ProductType":"132023","value":"144"},
    {"ProductType":"132030","value":"275"},
    {"ProductType":"132053","value":"42"},
    {"ProductType":"132093","value":"1"},
    {"ProductType":"132197","value":"94"},
    {"ProductType2":"132207","value2":"23"},
    {"ProductType2":"304055","value2":"51"},
    {"ProductType2":"520002","value2":"27"},
    {"ProductType2":"522275","value2":"34"}
];

var formattedData = d3.nest()
.key(function(d) { return Object.keys(d)[0]; })
.entries(data).map(function(d){ return d.values });

formattedData.forEach(function(pieData, i) {

  var color = d3.scale.category10();

  var arc = d3.svg.arc()
    .outerRadius(radius - 10)
    .innerRadius(0);

  var labelArc = d3.svg.arc()
    .outerRadius(radius - 40)
    .innerRadius(radius - 40);

  var svg = d3.select("body")
    .append("div")    
    .attr("width",width)
    .attr("height",height)
    .append("svg")
    .attr("width", "100%")
    .attr("height", "100%")
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

  var pie = d3.layout.pie()
    .sort(null)
    .value(function(d) {
      console.log(keyMap[i].value, d);
      return d[keyMap[i].value];
    });

  var g = svg.selectAll(".arc")
    .data(pie(pieData))
    .enter().append("g")
    .attr("class", "arc");

  g.append("path")
    .attr("d", arc)
    .style("fill", function(d, j) {
      return color(j);
    });

  g.append("text")
    .attr("transform", function(d) {
      return "translate(" + labelArc.centroid(d) + ")";
    })
    .attr("dy", ".35em")
    .text(function(d) {    
      return d.data[keyMap[i].category];
    });

  function type(d) {
    d[keyMap[i].value] = +d[keyMap[i].value];
    return d;
  }
});

.arc text {
  font: 10px sans-serif;
  text-anchor: middle;
}
.arc path {
  stroke: #fff;
}
div{
  float:left;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>