Question

我正在尝试从csv文件访问特定变量，如下所示：

月，年，叶 2011年1月20日 2011年2月30日 Mar，2011,40，

我想要实现的是创建一个高度为叶子值的条形图。下面是我用来从导入的csv文件访问leaves字段的代码。我在这里做错了，因为我是D3.js的新手。我对访问一个对象或引用一个对象（一般的语法）非常困惑。我不在乎年月，我只是想用叶子创建一个简单的条形图。任何帮助或指向宝贵资源的人都会非常感激。

谢谢

<!DOCTYPE HTML>
<html>
<head>
  <script type="text/javascript" src="d3.min.js"></script>
  <h4> D3 Bar Chart  </h4>
</head>
<style>
  .bar{
        display:inline-block;
        width: 20px;
        height: 80px;
        margin-right: 2px;
        background-color: teal;
  }

</style>
<body>
<script>
d3.csv("sl_month_year.csv", function(error, data)
{ if(error) {
  console.log(error);}
  else {console.log(data);
  var bar = d3.selectAll("body")
                .select("div")
                .data(data.length)
                .enter()
                .append("div")
                .attr("class","bar")
                .style("height", function(d) { for (i=0; i <= d.length; i++) { return d.[i].leaves + "px" ;});

});

Answer 1

我在你的代码中看到了一些我认为错误的东西。首先，您尝试使用循环中的d。[i] .leaves访问属性;我想你要做的是d [i] .leaves。其次，您实际上不需要循环集合中的元素，因为d3将为您处理。我会采用不同的方式来使用选择，使用简单的body选择和div的selectAll，并直接绑定到数据而不是data.length。

下面的代码应该没问题（尽管未经测试）：

d3.csv("sl_month_year.csv", function(error, data){
  if(error) {
      console.log(error);}
  else {
      console.log(data);
      var bar = d3.select("body")
            .selectAll("div")
            .data(data)
            .enter()
            .append("div")
            .attr("class","bar")
            .style("height", function(d) {         
                      return d.leaves + "px" ;
            });

});

从d3.js中的csv文件访问列/字段

1 个答案: