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

D3条形图故障排除

1 个答案: