在旧的D3图表上添加新的D3图表
Add new D3 chart above older ones
我目前有一个web应用程序,在每次点击提交(定义参数后)后添加一个新的d3图表到页面。我想做的是将最新的图表添加到其他图表之上,并将旧的图表推到下面以留出空间。它尝试将svg append更改为prepend,但显然不会那么简单!
这是我的脚本;
function chartGenerator(file_location)
{
var margin = {top: 20, right: 20, bottom: 30, left: 50},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var parseDate = d3.time.format("%Y-%m-%d %H:%M:%S").parse;
var x = d3.time.scale()
.range([0, width]);
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");
var line = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.close); });
var svg = d3.select("body").prepend("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.csv("{% static 'dgconnection/data.csv' %}", function(error, data) {
data.forEach(function(d) {
d.date = parseDate(d.date);
d.close = +d.close;
});
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain(d3.extent(data, function(d) { return d.close; }));
svg.prepend("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.predend("g")
.attr("class", "y axis")
.call(yAxis)
.prepend("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Value");
svg.prepend("path")
.datum(data)
.attr("class", "line")
.attr("d", line);
});
}
您可以将元素添加到D3中的现有元素,但该函数不称为prepend()
,而是insert()
,并接受两个参数。像.append()
一样,第一个是要插入的元素的名称。第二个是选择器。新元素将被插入到匹配选择器的元素之前。
在您的情况下,您需要更改的唯一代码是:
var svg = d3.select("body").insert("svg", "svg")
相关文章:
- 如何在d3上的图形中添加放大和缩小按钮
- D3.JS向rect添加缩放和列表项
- 在链接d3强制布局中添加和删除类
- 添加新数据时D3.JS条形图列偏移量
- 如何在d3.js饼图或圆环图中添加阴影
- 在d3中向DOM元素添加了图像,但现在它赢得了't过渡
- 向d3圆添加文本
- d3.js:如何为图上的散点添加标签
- 在d3.js圆中添加阴影效果
- 将工具提示添加到d3散点图中
- 如何将图标添加到D3轴
- 如何用D3添加一个简单的圆弧
- 如何使用d3添加线形图到散点图
- D3添加缩放功能到D3 .xml加载元素
- D3添加新的键值到现有的json数据
- D3添加点到多个堆叠线图
- 使用d3添加基于数据的彩色圆圈
- HTML中定义的SVG标记与D3添加的SVG标记相比
- 向d3添加两条路径
- D3 -添加一个原始符号