卡住了d3与数据的集成

Question

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Demo: SVG with data</title>
<script type="text/javascript" src="d3/d3.v3.js"></script>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">

var dataset = {
    "entry":[
    {"date": "2011-03-18T00:00:04"},
    {"date": "2011-04-18T00:05:03"},
    {"date": "2011-03-29T00:10:04"},
    {"date": "2011-05-19T00:15:03"},
    {"date":"2011-06-12T00:20:03"},
    {"date": "2011-08-09T00:25:03"}
    ],

 "entry" :[
    {"date": "2012-03-18T00:00:04"},
    {"date": "2012-04-18T00:05:03"},
    {"date": "2012-03-29T00:10:04"},
    {"date": "2012-05-19T00:15:03"},
    {"date":"2012-06-12T00:20:03"},
    {"date": "2012-08-09T00:25:03"}
    ]
}

console.log(dataset.entry);

var height = 600;
var width = 500;
var x = d3.time.scale().domain([new Date(2011, 0, 1,23,33,00), new Date(2013, 0, 1, 23, 59)]).range([0, width]);



var svg = d3.selectAll("body")
.append("svg")
.attr("width",width)
.attr("height",height)
.attr("shape-rendering","crispEdges");


svg.selectAll("body")
.data(dataset)
.enter()
.append("rect")
.attr("width", 4)
.attr("height",12)
.attr("x", function(d) { return x(new Date(d.entry.date)); } )
.attr("y",function(d,i){return i*10;})
.attr("fill","steelblue");

</script>
</body>
</html>

This is a simple file which I have created . 这是我创建的一个简单文件。 The intention is to mimic the gantt chart. 目的是模仿甘特图。 As you can see there are total 12 values which are there in the arrays . 如您所见，数组中共有12个值。 I am doing something wrong which is causing nothing to be printed. 我做错了什么，什么也没打印。

Can anyone guide me ? 谁能指导我？

Answer 1

The data, passed to the d3 selection, should be an array. 传递给d3选择的数据应该是一个数组。 I think what you want is this: 我认为您想要的是：

svg.selectAll("body")
  .data(dataset.entry)
  ...
  .attr("x", function(d) { return x(new Date(d.date)); } )

Also, delete one of your "entry" attributes of "dataset". 另外，删除“数据集”的“输入”属性之一。 They appear to be duplicated in your current code, which I suspect to be a copy/paste error. 它们似乎在您当前的代码中重复，我怀疑是复制/粘贴错误。

If it is not a copy/paste error, you can't define two "entry" elements, named identically - you would need to convert dataset to an array. 如果不是复制/粘贴错误，则不能定义两个名称相同的“ entry”元素-您需要将数据集转换为数组。 IE: IE浏览器：

var dataset = [ [ {"date": "blah" } ], [ {"date":"blah" } ] ];

And change the manner in which you access the data. 并更改访问数据的方式。

卡住了d3与数据的集成

问题描述

1 个解决方案

解决方案1
1 2013-02-18 16:17:24

卡住了d3与数据的集成

问题描述

1 个解决方案

解决方案1 1 2013-02-18 16:17:24

解决方案1
1 2013-02-18 16:17:24