0
我试图绑定一个JSON数据对象为d3.js码，即creatses条形图的方面（从vida.io）广东话绑定JSON数据到d3.js对象
这里是以下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
}
]
我试图defind数据作为变量（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>
任何帮助将是巨大的！
谢谢！那样做了！ –