动态生成多个d3 svg图形
Dynamically generating multiple d3 svg graphs
我有一个名为graphData
的对象数组(大小不同)。每个元素都包含创建d3图所需的所有信息,如果我通过硬编码访问graphData
元素(即graphdata[0]
, graphdata[1]
等),我就能够成功绘制图形。
当我尝试使用for循环为每个元素生成一个图时,问题就出现了。看看stackoverflow和web,但解决方案都是关于生成固定数量的多个图形,而不是动态生成多个图形。
下面是我生成一个图的工作代码。自动生成x个图形的推荐方法是什么?
var graphData = data.graph;
var RADIUS = 15;
var edgeData = graphData[0].edges;
var nodeData = graphData[0].nodes;
var stageNum = graphData[0].stage;
var xScale = d3.scale.linear()
.domain([d3.min(edgeData, function (d) {
return d.start[0];
}),
d3.max(edgeData, function (d) {
return d.start[0];
})])
.range([50, w - 100]);
var yScale = d3.scale.linear()
.domain([d3.min(edgeData, function (d) {
return d.start[1];
}),
d3.max(edgeData, function (d) {
return d.start[1];
})])
.range([50, h - 100]);
var rScale = d3.scale.linear()
.domain([0, d3.max(edgeData, function (d) {
return d.start[1];
})])
.range([14, 17]);
// already have divs with classes stage1, stage2... created.
var svg = d3.select(".stage" + stageNum).append("svg")
.attr({"width": w, "height": h})
.style("border", "1px solid black");
var elemEdge = svg.selectAll("line")
.data(edgeData)
.enter();
var edges = elemEdge.append("line")
.attr("x1", function (d) {
return xScale(d.start[0]);
})
.attr("y1", function (d) {
return yScale(d.start[1]);
})
.attr("x2", function (d) {
return xScale(d.end[0]);
})
.attr("y2", function (d) {
return yScale(d.end[1]);
})
.attr("stroke-width", 2)
.attr("stroke", "black");
var elemNode = svg.selectAll("circle")
.data(nodeData)
.enter();
var nodes = elemNode.append("circle")
.attr("cx", function (d) {
return xScale(parseInt(d.x));
})
.attr("cy", function (d) {
return yScale(parseInt(d.y));
})
.attr({"r": rScale(RADIUS)})
.style("fill", "yellow")
.style("stroke", "black");
Mike Bostock建议将图表实现为带有方法的可重用闭包。当您想要
时,这将是一个理想的实现。- 不同数据的多个图形
- 可能重新加载新数据(希望这就是你所说的动态?)
概括地说,你要做的就是像Mike在上面的文章中描述的那样,把上面的代码包装成一个函数,然后把data
作为闭包的一个属性。下面是一些被严重攻击的代码:
// your implementation here
var chart = function(){...}
var graphData = d3.json('my/graphdata.json', function(error, data){
// now you have your data
});
// let's say you have a div called graphs
var myGraphs = d3.select('.graphs')
.data(graphData)
.enter()
.append('g')
//now you have g elements for each of your datums in the graphData array
//we use the saved selection above and call the chart function on each of the elements in the selection
myGraphs.call(chart);
//note that internally in your `chart` closure, you have to take in a selection
//object and process it(data is already bound to each of your selections from above):
function chart(selection) {
selection.each(function(data) {
//...
这里有更多关于这个主题的好读物
您可以尝试以下方法。
var graphData = data.graph;
//forEach will return each element for the callback, you can then make use of the e1 to draw the graph.
graphData.forEach(function(e1){
//graph code goes here.
});
提供这个作为你的源数组
//it's just a single circle in 3, 4
var stuff = [3, 4];
var source = [ [stuff, stuff], [stuff] ];
Array的一些东西
Array.prototype.max = function() {
return Math.max.apply(null, this);
};
Array.prototype.min = function() {
return Math.min.apply(null, this);
};
设置:
var dim = [];
source.forEach(function(elem){
elem.forEach(function(circle){
dim.push(circle.min());
dim.push(circle.max());
});
});
var min = dim.min();
var max = dim.max();
var x = d3.scale.linear()
.domain([min, max])
.scale([yourscale]);
var y = d3.scale.linear()
.domain([min, max])
.scale([yourscale]);
d3.select('body').selectAll('div')
.data(source) //first step: a div with an svg foreach array in your array
.enter()
.append('div')
.append('svg')
.selectAll('circle') //second step: a circle in the svg for each item in your array
.data(function(d){
return d; //returns one of the [stuff] arrays
}).enter()
.append('circle')
.attr('r', 5)
.attr('cx', function(d){
return x(d[0]);
})
.attr('cy', function(d){
return y(d[1]);
})
.style('fill','blue');
相关文章:
- d3 svg differentiate onclick
- 在工具提示中显示D3 SVG
- 使用HTML渲染d3 SVG图形
- 在呈现 D3 SVG 对象之前更改引导按钮文本
- 定位D3 SVG画布x/y和加载时的缩放级别
- parentNode in d3 svg
- 使用d3.js在绑定数据内数组(以恒定性动态生成d3.svg.line)
- 如何在D3 SVG上绘制文本,如果它's的边界框符合某些标准
- D3 svg路径转换摇摆不定(包括jsfiddle)
- d3-svg中的选择
- 使用 d3 SVG 比例而不进行翻译
- 如何在 D3 svg 矩形中显示数据映射
- D3 SVG 图表中的现有元素不会更新 - 所有元素都被视为 exit() 和 enter() 集
- 使用d3.svg.path()绑定密钥
- d3 svg填充屏幕
- d3 SVG上的下拉菜单
- 我们如何连接函数而不像d3.svg.line.radial中那样调用它
- D3/SVG:如何通过修改范围来调整带有时间刻度的D3.SVG.axis的大小
- 如何根据用户输入更新D3 SVG图表
- d3 SVG中的角度指令