时间戳

首页 > 解决方案 > 我无法在 d3 中可视化数据

sql - 我无法在 d3 中可视化数据

问题描述

我正在学习 D3，并尝试从数据库中加载数据并将其可视化在 HTML 页面上。

我在 PHP 中的代码：

$myquery = "SELECT COUNT(JOB) FROM EMP WHERE JOB = 'SALESMAN'";

$query = mysqli_query($conn,$myquery);

if ( ! $query ) {
    echo mysqli_error($myquery);
    die;
}

$data = array();

for ($x = 0; $x < mysqli_num_rows($query); $x++) {
    $data[] = mysqli_fetch_assoc($query);
}

echo json_encode($data);  

mysqli_close($conn);

我得到的数据：

[{"COUNT(JOB)":"4"}]

我的 HTML 代码：

<script>
    
        d3.json("connect.php",function (data) {
        
            var canvas = d3.select("body").append("svg")
                .attr("width", 500)
                .attr("height", 500)
                
            canvas.selectAll("rect")
                .data(data)
                .enter()
                    .append("rect")
                    .attr("width", function(d){ return d.COUNT(JOB) * 100;})
                    .attr("height",48)
                    .attr("y", function (d, i){ return i * 50;})
                    .attr("fill", "black")
        
        })
    
</script>

我认为问题可能出在 JSON 数据上，其中 '4' 是字符串而不是数字。所以我将数据源 [{"COUNT(JOB)":"4"}] 更改为 [{"COUNT(JOB)":4}]。但是，在 HTML 页面中，条形图仍然没有显示。我认为问题应该是javascript。我检查了每个单词，但找不到任何问题。

顺便一提。如果我从 connect.php 加载数据，如何将字符串 '4' 转换为数字 4？

标签： sqld3.js

解决方案

您的 JSON 将导致您的属性名称为COUNT(JOB). 这里：

 function(d){ return d.COUNT(JOB) * 100;})

在这里，您传递JOB给一个函数d.COUNT，但d.COUNT不是函数或数据的属性。这将产生错误并导致不绘制任何内容。相反，您可以将您的计数称为：

 SELECT COUNT(JOB) as jobcount ...

并使用d.jobcount

其次，如果您使用的是 d3v5 或 d3v6，那么您使用的 d3.json 不正确。您使用的模式对 d3v4 及更早版本有效，但从 d3v5 开始，您需要使用以下格式：

 d3.json("connect.php").then(function (data) {

    ...

 })

否则，您的 javascript 可以工作：这是 javascript 的一个工作示例（在数据中进行硬编码以将其放入片段中）：

var data = [{"jobcount":"4"}]

            var canvas = d3.select("body").append("svg")
                .attr("width", 500)
                .attr("height", 500)
                
            canvas.selectAll("rect")
                .data(data)
                .enter()
                    .append("rect")
                    .attr("width", function(d){ return d.jobcount * 100;})
                    .attr("height",48)
                    .attr("y", function (d, i){ return i * 50;})
                    .attr("fill", "black")
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

最后，在这种情况下，您不需要将字符串强制"4"转换为数字，正如您在上面看到的（当将其与数字相乘时，javascript 将其视为数字）。如果您真的想将值强制为数字，可以使用一元+，例如：

`data.forEach(function(d) { d.jobcount = +d.jobcount })`

或者

.attr("width", function(d) { return +d.jobcount; })

推荐阅读