不能将Json数据绑定到d3.js对象
Cant bind Json data to d3.js Object
我正试图将Json数据对象绑定到d3.js代码中，该代码创建条形图的各个方面(来自vida)。io)
Json数据如下:
[
{
"chart_title": "Population",
"unit": "billion",
"India": 1.22,
"China": 1.36
},
{
"chart_title": "Popluation Grow Rate",
"unit": "percentage",
"India": 0.0131,
"China": 0.0048
},
{
"chart_title": "Tallest Building",
"unit": "meter",
"India": 833,
"China": 1614
},
{
"chart_title": "Sex Ratio",
"unit": "",
"India": 1.08,
"China": 1.06
},
{
"chart_title": "Literacy All Gender",
"unit": "percentage",
"India": 0.74,
"China": 0.92
},
{
"chart_title": "Literacy All Male",
"unit": "percentage",
"India": 0.82,
"China": 0.96
},
{
"chart_title": "Literacy All Female",
"unit": "percentage",
"India": 0.65,
"China": 0.88
},
{
"chart_title": "Area",
"unit": "million square km",
"India": 3.31,
"China": 9.706
},
{
"chart_title": "Area Land",
"unit": "million square km",
"India": 2.97,
"China": 9.434
},
{
"chart_title": "Area Water",
"unit": "million square km",
"India": 0.34,
"China": 0.272
},
{
"chart_title": "Infant Mortality",
"unit": "per thousand",
"India": 46.07,
"China": 15.62
}
]
我试图将数据定义为一个变量(value_var…)没有成功，虽然svg。data有一个value var参数
下面是我正在使用的代码，不知道为什么它不工作:
<!DOCTYPE html>
<html >
<head>
<title>D3 Page Template</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<style>
.chart div {
font: 10px sans-serif;
background-color: steelblue;
text-align: right;
padding: 3px;
margin: 1px;
color: white;
}
.bar {
fill: #4682b4;
}
svg {
border: none !important;
}
.chart-title {
font-size: 18px;
font-weight: bold;
}
</style>
<body>
<p>this is</p>
<div id="canvas-svg"></div>
</div>
<script>
var value_data=[
{
"chart_title": "Population",
"unit": "billion",
"India": 1.22,
"China": 1.36
},
{
"chart_title": "Popluation Grow Rate",
"unit": "percentage",
"India": 0.0131,
"China": 0.0048
},
{
"chart_title": "Tallest Building",
"unit": "meter",
"India": 833,
"China": 1614
},
{
"chart_title": "Sex Ratio",
"unit": "",
"India": 1.08,
"China": 1.06
},
{
"chart_title": "Literacy All Gender",
"unit": "percentage",
"India": 0.74,
"China": 0.92
},
{
"chart_title": "Literacy All Male",
"unit": "percentage",
"India": 0.82,
"China": 0.96
},
{
"chart_title": "Literacy All Female",
"unit": "percentage",
"India": 0.65,
"China": 0.88
},
{
"chart_title": "Area",
"unit": "million square km",
"India": 3.31,
"China": 9.706
},
{
"chart_title": "Area Land",
"unit": "million square km",
"India": 2.97,
"China": 9.434
},
{
"chart_title": "Area Water",
"unit": "million square km",
"India": 0.34,
"China": 0.272
},
{
"chart_title": "Infant Mortality",
"unit": "per thousand",
"India": 46.07,
"China": 15.62
}
];
/*--- IMPORTANT GUIDELINES ---
1. Use div #canvas-svg for svg rendering
var svg = d3.select("#canvas-svg");
2. 'data' variable contains JSON data from Data tab
Do NOT overwrite this variable
3. To define customizable properties, use capitalized variable names,
and define them in Properties tab ---*/
var WIDTH = 800;
var COLOR_1 = config.color1;
var COLOR_2 = config.color2;
var X_DATA_PARSE = vida.string;
var Y_DATA_PARSE = vida.number;
var Y_DATA_FORMAT = d3.format("");
var margin = {top: 70, right: 20, bottom: 30, left: 60},
width = WIDTH - margin.left - margin.right,
height = WIDTH - margin.top - margin.bottom;
var groups = [];
var makeBar = function(width, height, bar_data) {
var Y_DATA_FORMAT = d3.format("");
var Y_AXIS_LABEL = bar_data.unit;
if (bar_data.unit === 'percentage') {
Y_DATA_FORMAT = d3.format(".1%");
}
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], 0.1);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickFormat(Y_DATA_FORMAT);
var value_data = _.map(groups, function(d) {
return {x_axis: d, y_axis: bar_data[d]};
});
x.domain(value_data.map(function(d) { return d.x_axis; }));
y.domain([0, d3.max(value_data, function(d) { return d.y_axis; })]);
var svg = d3.select("#canvas-svg").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var detailBox = svg.append("svg:text")
.attr("dx", "20px")
.attr("dy", "-5px")
.attr("text-anchor", "right")
.style("fill", "#1D5096")
.style("font-weight", "bold");
var title = svg.append("text")
.attr("x", 0)
.attr("y", -50)
.attr("class","chart-title")
.text(bar_data.chart_title);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(0)")
.attr("y", -25)
.attr("x", 0)
.style("text-anchor", "left")
.text(Y_AXIS_LABEL);
svg.selectAll(".bar")
.data(value_data)
.enter().append("rect")
.style("fill", function(d) {
if (d.x_axis === groups[0]) {
return COLOR_1;
} else {
return COLOR_2;
}
})
.attr("x", function(d) { return x(d.x_axis); })
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.y_axis); })
.attr("height", function(d) { return height - y(d.y_axis); })
.on("mouseover", function(d, i, j) {
detailBox.attr("x", x.range()[i] - Y_DATA_FORMAT(d.y_axis).length / 2)
.attr("y", y(d.y_axis))
.text(Y_DATA_FORMAT(d.y_axis))
.style("visibility", "visible");
d3.select(this)
.style("opacity", 0.7);
}).on("mouseout", function() {
detailBox.style("visibility", "hidden");
d3.select(this)
.style("opacity", 1.0);
});
};
var width = width / data.length - 10;
width = width > 180 ? width : 180;
var keys = Object.keys(data[0]);
for (var i = 0; i < keys.length; i++) {
if (keys[i] !== "chart_title" && keys[i] !== "unit") {
groups.push(keys[i]);
}
}
for (i = 0; i < data.length; i++) {
makeBar(width, width, data[i]);
}
</script>
</body>
</html>
任何帮助在这将是伟大的!!
您的代码似乎不完整
你缺少2个变量config和vida在你的代码中使用。在</head>
<script>
var config = {
color1: 'red',
color2: 'blue',
}
var vida = {}
</script>
您还缺少变量data。像这样修改你的value_data声明
var value_data = data = [
{
...
你似乎也在使用下划线。js，但没有包含它的脚本。在你的</head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
如果有，请随意将路径修改为本地路径。
虽然这3个变化应该得到它的工作，还有其他问题与你的标记(像你的样式块不在你的头，你似乎有一个不匹配的标签在你的身体的顶部…)，你需要纠正了。
相关文章：
- 如何在d3.js中返回路径的y坐标
- 有条件更新d3.js力图中节点的最佳方法
- 使用D3.js计算带有字母间距的文本长度
- D3.js模式不适用于弧形或圆环图
- d3.js Chord图的动态工具提示
- 在D3.js中，有没有任何方法可以将x和y方向上的滚动事件绑定到平移svg
- HTML5FileReader输出到D3.js图表
- D3.js生成有效的SVG，但不显示任何内容
- d3.js:限制画笔的大小
- d3.js用按钮更新条形图工具提示
- 如何为d3.js图表输出组织/嵌套数据
- d3-js快速事件调用问题
- D3.JS向rect添加缩放和列表项
- d3.js圆的半径是否可以由样式属性指定
- 如何在d3.js中自定义事件侦听器
- 在新窗口上使用d3.js
- 如何用d3.js绘制折线图
- 使用dc.js、d3.js和crossfilter引用错误
- D3.js剪辑路径截断了我的图的边缘
- D3.js和坐标系
