Javascript 坚持将d3与数据集成 D3演示：带数据的SVG 变量数据集={ “条目”：[ {“日期”：“2011-03-18T00:00:04”}， {“日期”：“2011-04-18T00:05:03”}， {“日期”：“2011-03-29T00:10:04”}， {“日期”：“2011-05-19T00:15:03”}， {“日期”：“2011-06-12T00:20:03”}， {“日期”：“2011-08-09T00:25:03”} ], “条目”：[ {“日期”：“2012-03-18T00:00:04”}， {“日期”：“2012-04-18T00:05:03”}， {“日期”：“2012-03-29T00:10:04”}， {“日期”：“2012-05-19T00:15:03”}， {“日期”：“2012-06-12T00:20:03”}， {“日期”：“2012-08-09T00:25:03”} ] } console.log（dataset.entry）； var高度=600； var宽度=500； var x=d3.time.scale（）.域（[新日期（2011,0,1,23,33,00），新日期（2013,0,1,23,59）]）。范围（[0,width]）； var svg=d3.selectAll（“主体”） .append（“svg”） .attr（“宽度”，宽度） .attr（“高度”，高度） .attr（“形状渲染”、“边缘”）； svg.selectAll（“body”） .数据（数据集） .输入（） .append（“rect”） .attr（“宽度”，4） .attr（“高度”，12） .attr（“x”，函数（d）{返回x（新日期（d.entry.Date））；}） .attr（“y”，函数（d，i）{返回i*10；}） .attr（“填充”、“钢蓝”）；_Javascript_D3.js

Javascript 坚持将d3与数据集成 D3演示：带数据的SVG 变量数据集={ “条目”：[ {“日期”：“2011-03-18T00:00:04”}， {“日期”：“2011-04-18T00:05:03”}， {“日期”：“2011-03-29T00:10:04”}， {“日期”：“2011-05-19T00:15:03”}， {“日期”：“2011-06-12T00:20:03”}， {“日期”：“2011-08-09T00:25:03”} ], “条目”：[ {“日期”：“2012-03-18T00:00:04”}， {“日期”：“2012-04-18T00:05:03”}， {“日期”：“2012-03-29T00:10:04”}， {“日期”：“2012-05-19T00:15:03”}， {“日期”：“2012-06-12T00:20:03”}， {“日期”：“2012-08-09T00:25:03”} ] } console.log（dataset.entry）； var高度=600； var宽度=500； var x=d3.time.scale（）.域（[新日期（2011,0,1,23,33,00），新日期（2013,0,1,23,59）]）。范围（[0,width]）； var svg=d3.selectAll（“主体”） .append（“svg”） .attr（“宽度”，宽度） .attr（“高度”，高度） .attr（“形状渲染”、“边缘”）； svg.selectAll（“body”） .数据（数据集） .输入（） .append（“rect”） .attr（“宽度”，4） .attr（“高度”，12） .attr（“x”，函数（d）{返回x（新日期（d.entry.Date））；}） .attr（“y”，函数（d，i）{返回i*10；}） .attr（“填充”、“钢蓝”）；

javascript d3.js

Javascript 坚持将d3与数据集成 D3演示：带数据的SVG 变量数据集={ “条目”：[ {“日期”：“2011-03-18T00:00:04”}， {“日期”：“2011-04-18T00:05:03”}， {“日期”：“2011-03-29T00:10:04”}， {“日期”：“2011-05-19T00:15:03”}， {“日期”：“2011-06-12T00:20:03”}， {“日期”：“2011-08-09T00:25:03”} ], “条目”：[ {“日期”：“2012-03-18T00:00:04”}， {“日期”：“2012-04-18T00:05:03”}， {“日期”：“2012-03-29T00:10:04”}， {“日期”：“2012-05-19T00:15:03”}， {“日期”：“2012-06-12T00:20:03”}， {“日期”：“2012-08-09T00:25:03”} ] } console.log（dataset.entry）； var高度=600； var宽度=500； var x=d3.time.scale（）.域（[新日期（2011,0,1,23,33,00），新日期（2013,0,1,23,59）]）。范围（[0,width]）； var svg=d3.selectAll（“主体”） .append（“svg”） .attr（“宽度”，宽度） .attr（“高度”，高度） .attr（“形状渲染”、“边缘”）； svg.selectAll（“body”） .数据（数据集） .输入（） .append（“rect”） .attr（“宽度”，4） .attr（“高度”，12） .attr（“x”，函数（d）{返回x（新日期（d.entry.Date））；}） .attr（“y”，函数（d，i）{返回i*10；}） .attr（“填充”、“钢蓝”）；,javascript,d3.js,Javascript,D3.js,这是我创建的一个简单文件。其目的是模仿甘特图。如您所见，数组中总共有12个值。我做错了什么，导致什么也没印出来有人能指导我吗？传递给d3选择的数据应该是一个数组。我想你想要的是： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>D3 Demo: SVG with data</title> <script type="text/

这是我创建的一个简单文件。其目的是模仿甘特图。如您所见，数组中总共有12个值。我做错了什么，导致什么也没印出来

有人能指导我吗？

传递给d3选择的数据应该是一个数组。我想你想要的是：

<!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>

另外，删除“数据集”的一个“条目”属性。它们似乎在您当前的代码中重复，我怀疑这是复制/粘贴错误

如果不是复制/粘贴错误，则不能定义两个同名的“entry”元素—您需要将dataset转换为数组。即：

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

并更改访问数据的方式。

在Chrome中检查您的网站，看看它在控制台中给您带来了什么错误。

dataset

是一个对象。看不到JSON。Afaik，

.data

希望传递的是数组，而不是对象。它是有效的JSON@FelixKling@Siddharth：不，不是。发布的代码是JavaScript，而不是JSON。JSON是一种与XML类似的数据格式。如果您将所有内容从第一个

复制到最后一个

并将其放入自己的文件或字符串中，则是的，您拥有JSON。这是一个需要理解的重要区别。这里不能称之为JSON对象吗@FelixKlingthanks说这很有帮助。顺便问一下，你能给我推荐一个可以学习Json的链接吗？

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