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 = [{ category: 'ProductType', value: 'value' }, { category: 'ProcessType', value: 'errorcount' }, { category: 'Message', value: 'count' }];
将“对象阵列”格式的现有数据转换为“阵列阵列”格式。

var formattedData = d3.nest() .key(function(d) { return Object.keys(d)[0]; }) .entries(data) .map(function(d){ return d.values });
创建关键地图后，您可以迭代数据数组并创建图表，如下面的代码段所示。
根据循环内的要求计算图表位置并相应地放置SVG。

以下是示例代码段。

＆＃13;

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;
  }
});

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: