Javascript 试图建立一个条形图。代码中没有错误，但我没有'；看不见_Javascript_D3.js

Javascript 试图建立一个条形图。代码中没有错误，但我没有'；看不见

javascript d3.js

Javascript 试图建立一个条形图。代码中没有错误，但我没有'；看不见,javascript,d3.js,Javascript,D3.js,我试图在d3中制作一个简单的条形图，但我的代码中没有错误，只得到一个空白页。我不确定发生了什么，因为我使用了教程中的函数来正确格式化数据。我将包括一个csv文件的样本以及代码 BeaconMac,UserMac,Date Office,Michael Albanese,6-Mar-2015 Office,Michael Albanese,6-Mar-2015 Treatment Room,Michael Albanese,6-Mar-2015 Office,Michael Albanese,6-

我试图在d3中制作一个简单的条形图，但我的代码中没有错误，只得到一个空白页。我不确定发生了什么，因为我使用了教程中的函数来正确格式化数据。我将包括一个csv文件的样本以及代码

BeaconMac,UserMac,Date
Office,Michael Albanese,6-Mar-2015
Office,Michael Albanese,6-Mar-2015
Treatment Room,Michael Albanese,6-Mar-2015
Office,Michael Albanese,6-Mar-2015
Treatment Room,Michael Albanese,6-Mar-2015
Office,Michael Albanese,6-Mar-2015






<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="chart"></div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
    d3.csv("data.csv", function(data){
        var dateFormat = d3.time.format('%m/%d/%Y');
        var numberFormat = d3.format('.2f');

        data.forEach(function(d){
            d.dd = dateFormat.parse(d.date);
            d.month = d3.time.month(d.dd);
            d.close = +d.close;
            d.open = +d.open;
        });

        //width and height
        var w = 500;
        var h = 100;

        //the svg element
        var svg = d3.select("body")
                .append("svg")
                .attribute("width", w)
                .attribute("height", h);
        svg.selectAll("rect")
                .data(data)
                .enter()
                .append("rect")
                .attribute("x", 0)
                .attribute("y", 0)




    })
</script>

</body>
</html>

BeaconMac，UserMac，日期
办公室，Michael Albanese，2015年3月6日
办公室，Michael Albanese，2015年3月6日
治疗室，Michael Albanese，2015年3月6日
办公室，Michael Albanese，2015年3月6日
治疗室，Michael Albanese，2015年3月6日
办公室，Michael Albanese，2015年3月6日
标题
d3.csv（“data.csv”），函数（数据）{
var dateFormat=d3.time.format（“%m/%d/%Y”）；
var numberFormat=d3.format（'.2f'）；
data.forEach（函数（d）{
d、 dd=dateFormat.parse（d.date）；
d、 月=d3.时间.月（d.dd）；
d、 close=+d.close；
d、 open=+d.open；
});
//宽度和高度
var w=500；
var h=100；
//svg元素
var svg=d3.选择（“主体”）
.append（“svg”）
.属性（“宽度”，w）
.属性（“高度”，h）；
svg.selectAll（“rect”）
.数据（数据）
.输入（）
.append（“rect”）
.属性（“x”，0）
.属性（“y”，0）
})

您的代码意味着您的csv有四列，标题分别为

日期

、

日期

、

关闭

和

打开

。但是，您的

csv

看起来没有这些列。它有三列，标题分别为

BeaconMac

、

UserMac

、和

date

我也不明白你怎么能用这些数据做一个条形图。您有一个日期类别和两个字符串类别。要制作条形栏，您需要一些数字。

您的代码意味着您的csv有四列，标题分别为

date

、

dd

、

close

和

open

。但是，您的

csv

看起来没有这些列。它有三列，标题分别为

BeaconMac

、

UserMac

、和

date

我也不明白你怎么能用这些数据做一个条形图。您有一个日期类别和两个字符串类别。为了制作条形图列，您需要一些数字。

只需向您添加一些信息：矩形（rect）有4个属性（使用.attr设置）：x位置、y位置、高度和宽度。如果不设置高度和宽度，则不会显示任何视觉效果。

我对d3比较陌生。对于这种类型的数据，有哪些可视化的例子？两个分类变量和一个序数的可视化？这是个棘手的问题。您可以发布更多的示例数据吗？我会看看它是否能与Sankey图表或热图一起工作。我不能详细说明数据，但我正在考虑通过excel添加每个用户使用系统的频率，因为数据集很大。也许这会给我更多的选择？披露：这是我自己的网站/项目。但我实际上认为这对确定数据的正确可视化非常有帮助：谢谢，这非常有帮助！我对所有的选择都有点迷茫，我对d3比较陌生。对于这种类型的数据，有哪些可视化的例子？两个分类变量和一个序数的可视化？这是个棘手的问题。您可以发布更多的示例数据吗？我会看看它是否能与Sankey图表或热图一起工作。我不能详细说明数据，但我正在考虑通过excel添加每个用户使用系统的频率，因为数据集很大。也许这会给我更多的选择？披露：这是我自己的网站/项目。但我实际上认为这对确定数据的正确可视化非常有帮助：谢谢，这非常有帮助！我对所有的选择都有点迷茫