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

$结果将转储此：

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