陷入了d3与数据的集成
Stuck with integrating d3 with data
<!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>
这是我创建的一个简单的文件。其目的是模仿甘特图。正如您所看到的,数组中总共有12个值。我做错了什么,导致什么都没印出来。
有人能给我指路吗?
传递给d3选择的数据应该是一个数组。我想你想要的是:
svg.selectAll("body")
.data(dataset.entry)
...
.attr("x", function(d) { return x(new Date(d.date)); } )
此外,删除"dataset"的一个"entry"属性。它们在您当前的代码中似乎是重复的,我怀疑这是一个复制/粘贴错误。
如果不是复制/粘贴错误,则不能定义两个名称相同的"条目"元素——您需要将数据集转换为数组。IE:
var dataset = [ [ {"date": "blah" } ], [ {"date":"blah" } ] ];
并更改访问数据的方式。
相关文章:
- 用程序搜索JQuery数据表中的文本
- 要求输入在数据列表中
- 正在将数据主题添加到所有项目
- React ajax数据集成
- 将Laravel5.0中的谷歌图表与mysql数据库中的数据集成
- 添加预加载器:将NProgress.js与ember集成.js与ember数据集成
- 如何在集成测试中访问ember数据存储实例
- 将JSON数据集成到高图表中
- amcharts与RubyonRails的集成:使用数据库中的数据填充图形
- 聊天和数据结构集成
- 如何在不需要刷新的情况下将Kendo UI数据向导集成到页面上
- 如何将Redux与非常大的数据集和IndexedDB集成
- 骨干JS数据表集成
- 如何将实时数据集成到nodeJS中并表达
- C3.js与React.js的集成,用于实时数据
- 问题与我的点击事件上GoogleMaps集成-从JSON文件拉数据
- jQuery数据表和ColumnFilterWidget集成问题
- Angular js-数据集成在应用程序控制器中,无需外部json.如何渲染数据
- 陷入了d3与数据的集成
- 将数据从标准记录类型集成到网络套件中的自定义记录类型