javascript - D3 条形图故障排除

Question

我有一个包含 5 列的数据库:ID、customerName、dateYear、dateMonth 和 dateDay。当用户发送表单时，日期列将添加到数据库中。例如，如果用户今天发送了表单，则 3 列将包含 2016 年、6 月和 7 年。我想制作一个 D3 条形图，可以提取此信息并显示每月/每年发送的表单数量。我有一个 HTML 格式的复选框列表，供管理员选择一个或多个月份以及一年。

        <input type="submit" name="monthlyReport" value="Generate a Monthly Report for:" />
        <br>
        <input type="checkbox" value="January" name="monthList[]"/>January
        <br>
        <input type="checkbox" value="February" name="monthList[]"/>February

等等...

<select name="selyear1">
    <option value="2016">2016</option>
    <option value="2017">2017</option>
    <option value="2018">2018</option>
    <option value="2019">2019</option>
    <option value="2020">2020</option>
</select>

这是我的 PHP 代码，它接受用户输入并将其转换为查询:

$monthList = array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
$yearList = array("2016", "2017", "2018", "2019", "2020");

$monthlyReport = isset($_POST["monthlyReport"]) ? $_POST["monthlyReport"] : "";
$monthList = array();
$monthList = isset($_POST["monthList"]) ? $_POST["monthList"] : "";
$selectedYear = isset($_POST["selyear1"]) ? $_POST["selyear1"] : "";
if(isset($monthlyReport) && !empty($monthList) && in_array($selectedYear, $yearList)) {
    foreach ($monthList as $month){ 
        if (in_array($month, $monthList)) {

            $stmt = $conn->prepare("SELECT dateYear, dateMonth FROM just_ink WHERE dateMonth = :month AND dateYear= :year");
            $stmt->execute(array(":month" => $month, ":year"=> $selectedYear));
            $result[] = $stmt->fetchAll(PDO::FETCH_ASSOC);

        }
    }
}
var_dump($result);

$result 将转储此:

array(2) { [0]=> array(1) { [0]=> array(2) { ["dateYear"]=> string(4) "2016" ["dateMonth"]=> string(7) "January" } } [1]=> array(2) { [0]=> array(2) { ["dateYear"]=> string(4) "2016" ["dateMonth"]=> string(4) "June" } [1]=> array(2) { ["dateYear"]=> string(4) "2016" ["dateMonth"]=> string(4) "June" } } }

那么我到底如何将这个结果转换成D3条形图呢？我已经查看了 d3Noob 提示和技巧，但我相信这是一个更高级的案例。提前感谢您的回复!

Answer 1

如果我理解正确，您将创建一个具有所需值的数组。

$array = array( array("2016", "January"),
                array("2016", "February"),
                array("2016", "February"),
                array("2016", "February"),
                array("2016", "March"),
                array("2016", "March"),
                array("2016", "June"),
                array("2016", "June")
              );

echo json_encode($array);
//[["2016","January"],["2016","February"],["2016","February"],["2016","February"],["2016","March"],["2016","March"],["2016","June"],["2016","June"]]

我将公开一个端点，该端点将返回此json，然后在我的脚本中使用它，这样您就可以进行异步调用，并且不会按顺序停止页面的呈现获取/等待数据。

如果我们使用上一个代码段返回的 json，我们可以调用 d3.json 并修改数据以创建条形图。

d3.json("data.json", function(error, data) {
  var nested_data = d3.nest()
    .key(function(d) {
      return d[1];
    })
    .rollup(function(leaves) {
      return leaves.length;
    })
    .entries(data);
    console.log(nested_data);
    //Object {key: "January", values: 1}
    //Object {key: "February", values: 3}
    //Object {key: "March", values: 2}
    //Object {key: "June", values: 2}


  x.domain(nested_data.map(function(d) { // Set x domain by keys (Month Name)
    return d.key;
  }));
  y.domain([0, d3.max(nested_data, function(d) { // Set y domain by finding max value (Month count)
    return d.values;
  })]);

  svg.append("g") // Append x-axis
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

  svg.append("g") // Append y-axis
    .attr("class", "y axis")
    .call(yAxis)
    .append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", ".71em")
    .style("text-anchor", "end")
    .text("Frequency");

  svg.selectAll(".bar") // Join our data
    .data(nested_data) 
    .enter() // For each value do the following
    .append("rect") 
    .attr("class", "bar")
    .attr("x", function(d) {
      return x(d.key);
    })
    .attr("width", x.rangeBand())
    .attr("y", function(d) {
      return y(d.values);
    })
    .attr("height", function(d) {
      return height - y(d.values);
    });
}

您可以在此处找到一个可用的 plnkr，其代码为:http://plnkr.co/edit/Jin12g7dVdCq2eu46FnX?p=preview