Javascript 将d3图表转换为从变量内的json加载数据
我正在尝试用d3制作一个条形图，为此我遵循本教程，一切看起来都很好，但我无法从变量中的JSON加载数据，而不是从JSON文件加载数据，我已经成功地将JSON加载到变量，但我不知道如何迭代数据和创建条形图。守则：Javascript 将d3图表转换为从变量内的json加载数据,javascript,json,d3.js,bar-chart,loaddata,Javascript,Json,D3.js,Bar Chart,Loaddata,我正在尝试用d3制作一个条形图，为此我遵循本教程，一切看起来都很好，但我无法从变量中的JSON加载数据，而不是从JSON文件加载数据，我已经成功地将JSON加载到变量，但我不知道如何迭代数据和创建条形图。守则： <!DOCTYPE html> <meta charset="utf-8"> <head> <style> .axis { font: 10px sans-serif;
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<style>
.axis {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
</style>
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var jdata = [
{
"date": "2013-01",
"value": "53"
},
{
"date": "2013-02",
"value": "165"
},
{
"date": "2013-03",
"value": "269"
},
{
"date": "2013-04",
"value": "344"
},
{
"date": "2013-05",
"value": "376"
},
{
"date": "2013-06",
"value": "410"
},
{
"date": "2013-07",
"value": "421"
},
{
"date": "2013-08",
"value": "405"
},
{
"date": "2013-09",
"value": "376"
},
{
"date": "2013-10",
"value": "359"
},
{
"date": "2013-11",
"value": "392"
},
{
"date": "2013-12",
"value": "433"
},
{
"date": "2014-01",
"value": "455"
},
{
"date": "2014-02",
"value": "478"
}
];
// console.log(jdata);
root = JSON.parse( jdata );
var margin = {top: 20, right: 20, bottom: 70, left: 40},
width = 600 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;
// Parse the date / time
var parseDate = d3.time.format("%Y-%m").parse;
var x = d3.scale.ordinal().rangeRoundBands([0, width], .05);
var y = d3.scale.linear().range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickFormat(d3.time.format("%Y-%m"));
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(10);
var svg = d3.select("body").append("svg")
.data(root)
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform","translate(" + margin.left + "," + margin.top + ")");
//d3.json
//d3.csv("bar-data.csv", function(error, data) {
//d3.selectAll('g').data(function(data){
data.forEach(function(d) {
d.date = parseDate(d.date);
d.value = +d.value;
});
x.domain(data.map(function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return d.value; })]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", "-.55em")
.attr("transform", "rotate(-90)" );
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Value ($)");
svg.selectAll("bar")
.data(data)
.enter().append("rect")
.style("fill", "steelblue")
.attr("x", function(d) { return x(d.date); })
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.value); })
.attr("height", function(d) { return height - y(d.value); });
});
</script>
</body>
.安讯士{
字体：10px无衬线；
}
.轴线路径，
.轴线{
填充：无；
行程：#000；
形状渲染：边缘清晰；
}
var jdata=[
{
“日期”：“2013-01”，
“值”：“53”
},
{
“日期”：“2013-02”，
“值”：“165”
},
{
“日期”：“2013-03”，
“值”：“269”
},
{
“日期”：“2013-04”，
“值”：“344”
},
{
“日期”：“2013-05”，
“值”：“376”
},
{
“日期”：“2013-06”，
“值”：“410”
},
{
“日期”：“2013-07”，
“值”：“421”
},
{
“日期”：“2013-08”，
“值”：“405”
},
{
“日期”：“2013-09”，
“值”：“376”
},
{
“日期”：“2013-10”，
“值”：“359”
},
{
“日期”：“2013-11”，
“值”：“392”
},
{
“日期”：“2013-12”，
“值”：“433”
},
{
“日期”：“2014-01”，
“值”：“455”
},
{
“日期”：“2014-02”，
“值”：“478”
}
];
//console.log（jdata）；
root=JSON.parse（jdata）；
var margin={顶部：20，右侧：20，底部：70，左侧：40}，
宽度=600-边距。左侧-边距。右侧，
高度=300-margin.top-margin.bottom；
//解析日期/时间
var parseDate=d3.time.format（“%Y-%m”）.parse；
var x=d3.scale.ordinal（）.rangeRoundBands（[0，宽度]，.05）；
变量y=d3.scale.linear（）.range（[height，0]）；
var xAxis=d3.svg.axis（）
.比例（x）
.orient（“底部”）
.tickFormat（d3.time.format（“%Y-%m”）；
var yAxis=d3.svg.axis（）
.比例（y）
.东方（“左”）
.蜱（10）；
var svg=d3.选择（“正文”）.追加（“svg”）
.数据（根）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
//d3.json
//d3.csv（“bar data.csv”，函数（错误，数据）{
//d3.选择全部（'g'）。数据（函数（数据）{
data.forEach（函数（d）{
d、 日期=解析日期（d.date）；
d、 值=+d.值；
});
x、 域（data.map（函数（d）{returnd.date；}））；
y、 域（[0，d3.max（数据，函数（d）{返回d.value；}）]；
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）
.selectAll（“文本”）
.style（“文本锚定”、“结束”）
.attr（“dx”，“-.8em”）
.attr（“dy”，“-.55em”）
.attr（“变换”、“旋转（-90）”）；
svg.append（“g”）
.attr（“类”、“y轴”）
.呼叫（yAxis）
.append（“文本”）
.attr（“变换”、“旋转（-90）”）
.attr（“y”，6）
.attr（“dy”，“.71em”）
.style（“文本锚定”、“结束”）
.text（“值（$）”）；
svg.selectAll（“条”）
.数据（数据）
.enter（）.append（“rect”）
.样式（“填充”、“钢蓝”）
.attr（“x”，函数（d）{返回x（d.date）；}）
.attr（“宽度”，x.rangeBand（））
.attr（“y”，函数（d）{返回y（d.value）；}）
.attr（“高度”，函数（d）{返回高度-y（d.value）；}）；
});
它也在这里：。在代码中查看我的注释…
var jdata=[
{
“日期”：“2013-01”，
“值”：“53”
},
{
“日期”：“2013-02”，
“值”：“165”
},
{
“日期”：“2013-03”，
“值”：“269”
},
{
“日期”：“2013-04”，
“值”：“344”
},
{
“日期”：“2013-05”，
“值”：“376”
},
{
“日期”：“2013-06”，
“值”：“410”
},
{
“日期”：“2013-07”，
“值”：“421”
},
{
“日期”：“2013-08”，
“值”：“405”
},
{
“日期”：“2013-09”，
“值”：“376”
},
{
“日期”：“2013-10”，
“值”：“359”
},
{
“日期”：“2013-11”，
“值”：“392”
},
{
“日期”：“2013-12”，
“值”：“433”
},
{
“日期”：“2014-01”，
“值”：“455”
},
{
“日期”：“2014-02”，
“值”：“478”
}
],
//root=JSON.parse（jdata），
//***编辑***jdata不是JSON.parse所要求的字符串
//它的格式已经很好了，所以就用它吧
数据=jdata，
边距={顶部：20，右侧：20，底部：70，左侧：40}，
宽度=600-边距。左侧-边距。右侧，
高度=300-margin.top-margin.bottom，
//解析日期/时间
//***更好的注释应该是“用于解析日期和时间”。。。
parseDate=d3.time.format（“%Y-%m”）.parse，
x=d3.scale.ordinal（）.rangeRoundBands（[0，宽度]，.05），
y=d3.刻度.线性（）.范围（[高度，0]），
xAxis=d3.svg.axis（）
.比例（x）
.orient（“底部”）
.tickFormat（d3.time.format（“%Y-%m”），
yAxis=d3.svg.axis（）
.比例（y）
.东方（“左”）
.滴答声（10），
svg=d3。选择（“正文”）。追加（“svg”）
//***编辑***
//data方法返回enter集合，但您尚未准备好。。。
//.数据（根）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
//d3.json
//d3.csv（“bar data.csv”，函数（错误，数据）{
//d3.选择全部（'g'）。数据（函数（数据）{
data.forEach（函数（d）{
//现在正在解析日期和时间
d、 日期=parseDat
var jdata = [
{
"date": "2013-01",
"value": "53"
},
{
"date": "2013-02",
"value": "165"
},
{
"date": "2013-03",
"value": "269"
},
{
"date": "2013-04",
"value": "344"
},
{
"date": "2013-05",
"value": "376"
},
{
"date": "2013-06",
"value": "410"
},
{
"date": "2013-07",
"value": "421"
},
{
"date": "2013-08",
"value": "405"
},
{
"date": "2013-09",
"value": "376"
},
{
"date": "2013-10",
"value": "359"
},
{
"date": "2013-11",
"value": "392"
},
{
"date": "2013-12",
"value": "433"
},
{
"date": "2014-01",
"value": "455"
},
{
"date": "2014-02",
"value": "478"
}
],
//root = JSON.parse(jdata),
//***EDIT*** jdata is not a string as required by JSON.parse
//it's already well formed so just use it
data = jdata,
margin = {top: 20, right: 20, bottom: 70, left: 40},
width = 600 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom,
// Parse the date / time
//***a better comment would be "for parsing the date and time"...
parseDate = d3.time.format("%Y-%m").parse,
x = d3.scale.ordinal().rangeRoundBands([0, width], .05),
y = d3.scale.linear().range([height, 0]),
xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickFormat(d3.time.format("%Y-%m")),
yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(10),
svg = d3.select("body").append("svg")
//***EDIT***
//the data method returns the enter collection and your not ready for it yet...
//.data(root)
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform","translate(" + margin.left + "," + margin.top + ")");
//d3.json
//d3.csv("bar-data.csv", function(error, data) {
//d3.selectAll('g').data(function(data){
data.forEach(function (d) {
//NOW is parsing the date and time
d.date = parseDate(d.date);
d.value = +d.value;
});
x.domain(data.map(function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return d.value; })]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", "-.55em")
.attr("transform", "rotate(-90)" );
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Value ($)");
svg.selectAll("bar")
.data(data)
.enter().append("rect")
.style("fill", "steelblue")
.attr("x", function(d) { return x(d.date); })
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.value); })
.attr("height", function(d) { return height - y(d.value); });
//You forgot to comment this out...
// });
</script>