如何将json对象数据输入D3图表(如气泡图、条形图)来代替.json文件
How to feed json object data into D3 charts(eg bubble chart, bar chart) in place of .JSON files?
-
我在一个js文件中有json对象(例如MyFirstMashup.js(在同一个js文件中复制了气泡图的脚本。总之在web上可用的示例中,他们使用了json文件。flare.json、xyz.tsv等。我现在负担不起这个文件在MyFirstMashup.js文件中动态获取数据。相反,我在我现有的js代码下面附上了气泡图代码。但是不幸的是,气泡图代码在data.json((部分。我想我不必使用这个,因为我已经具有JSON对象。如果没有,则需要在气泡图代码。带有气泡图的MyFirstMashup.jspart和json对象**(var jsonObj(**是---
var jsonStr=JSON.stringfy(矩阵(
var jsonObj=JSON.parse(jsonStr(//json对象var bubble = d3.layout.pack() .sort(null) .size([diameter, diameter]) .padding(1.5); var svg = d3.select("body").append("svg") .attr("width", diameter) .attr("height", diameter) .attr("class", "bubble"); d3.json("flare.json", function(error, root) { //hw to replace flare.json if (error) throw error; //with jsonObj(any json object) var node = svg.selectAll(".node") .data(bubble.nodes(classes(root)) .filter(function(d) { return !d.children; })) .enter().append("g") .attr("class", "node") .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); node.append("title") .text(function(d) { return d.className + ": " + format(d.value); }); node.append("circle") .attr("r", function(d) { return d.r; }) .style("fill", function(d) { return color(d.packageName); }); node.append("text") .attr("dy", ".3em") .style("text-anchor", "middle") .text(function(d) { return d.className.substring(0, d.r / 3); }); }); // Returns a flattened hierarchy containing all leaf nodes under the root. function classes(root) { var classes = []; function recurse(name, node) { if (node.children) node.children.forEach(function(child) { recurse(node.name, child); }); else classes.push({packageName: name, className: node.name, value: node.size}); } recurse(null, root); return {children: classes}; } d3.select(self.frameElement).style("height", diameter + "px");
然后,您可以创建这样的渲染函数,而不是使用d3.json函数:
var jsonStr = JSON.stringify(matrix);
var jsonObj = JSON.parse(jsonStr); //json object
var bubble = d3.layout.pack()
.sort(null)
.size([diameter, diameter])
.padding(1.5);
var svg = d3.select("body").append("svg")
.attr("width", diameter)
.attr("height", diameter)
.attr("class", "bubble");
render(jsonObj); // And simply call it like this.
function render(root) {
var node = svg.selectAll(".node")
.data(bubble.nodes(classes(root))
.filter(function(d) { return !d.children; }))
.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
node.append("title")
.text(function(d) { return d.className + ": " + format(d.value); });
node.append("circle")
.attr("r", function(d) { return d.r; })
.style("fill", function(d) { return color(d.packageName); });
node.append("text")
.attr("dy", ".3em")
.style("text-anchor", "middle")
.text(function(d) { return d.className.substring(0, d.r / 3); });
};
// Returns a flattened hierarchy containing all leaf nodes under the root.
function classes(root) {
var classes = [];
function recurse(name, node) {
if (node.children) node.children.forEach(function(child) { recurse(node.name, child); });
else classes.push({packageName: name, className: node.name, value: node.size});
}
recurse(null, root);
return {children: classes};
}
d3.select(self.frameElement).style("height", diameter + "px");
或者删除render函数,直接在.data(bubble.nodes(classes(jsonObj ))
中使用jsonObj
var jsonStr = JSON.stringify(matrix);
var jsonObj = JSON.parse(jsonStr); //json object
var bubble = d3.layout.pack()
.sort(null)
.size([diameter, diameter])
.padding(1.5);
var svg = d3.select("body").append("svg")
.attr("width", diameter)
.attr("height", diameter)
.attr("class", "bubble");
var node = svg.selectAll(".node")
.data(bubble.nodes(classes(jsonObj))
.filter(function(d) { return !d.children; }))
.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
node.append("title")
.text(function(d) { return d.className + ": " + format(d.value); });
node.append("circle")
.attr("r", function(d) { return d.r; })
.style("fill", function(d) { return color(d.packageName); });
node.append("text")
.attr("dy", ".3em")
.style("text-anchor", "middle")
.text(function(d) { return d.className.substring(0, d.r / 3); });
// Returns a flattened hierarchy containing all leaf nodes under the root.
function classes(root) {
var classes = [];
function recurse(name, node) {
if (node.children) node.children.forEach(function(child) { recurse(node.name, child); });
else classes.push({packageName: name, className: node.name, value: node.size});
}
recurse(null, root);
return {children: classes};
}
d3.select(self.frameElement).style("height", diameter + "px");
小提琴示例:http://jsfiddle.net/mzz9B/47/
相关文章:
- 用chart.js绘制条形图
- d3.js用按钮更新条形图工具提示
- 添加新数据时D3.JS条形图列偏移量
- Chart.js条形图:网格颜色和隐藏标签
- 在条形图中呈现数据AngularJS,如何制作一个好的多条形图
- Chart.js 2.1.2条形图动画问题
- 如何使用 json 数据在 d3.js 中创建垂直分组的条形图
- 在 flot.js 中绘制折线图和条形图以获取 JSON 数据
- C3条形图-JSON输入
- 使用c3js为相同的json数据创建组合图(线条和条形图)
- Json到jquery条形图
- 如何在javascript文件中使用json列表文件绘制堆叠条形图
- 用d3.csv加载csv数据在nvd3多条形图示例(JSON格式)
- 带有负JSON数据的堆叠条形图
- 我如何在highcharts中加载外部json数据来显示条形图
- 将JSON转换成数组绘制条形图
- 如何将json对象数据输入D3图表(如气泡图、条形图)来代替.json文件
- Angular NVD3多条形图,双y轴,只显示使用json数据的线
- 对json数据进行分组以创建分组条形图
- 使用 AmCharts 从从 localStorage 检索的 JSON 对象创建条形图