[英]D3 v4 transition or update
由于没有更新图表的运气,我可以使用完整的数据集来初始化它,并尝试了许多示例。 我首先尝试更新X和Y轴比例以获取不断增加的数据集。 最终,我实际上只想更新整个图表,包括数据点。 因此,也许有一种更简单的方法。
我希望只是push()
送到data_set
,并调用chart.update
var margin, x, y, valueline, div, svg, xAxis, yAxis;
var data_set = [
{ser1: 0, ser2: 0}
];
初始化代码:
chart.init = function() {
// set the dimensions and margins of the graph
margin = {top: 20, right: 20, bottom: 20, left: 20},
width = 860 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
// set the ranges
x = d3.scaleLinear().range([0,width]);
y = d3.scaleLinear().range([height, 0]);
// define the line
valueline = d3.line()
.x(function(d) { return x(d.ser1); })
.y(function(d) { return y(d.ser2); });
// Define the div for the tooltip
div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
// append the svg obgect to the body of the page
// appends a 'group' element to 'svg'
// moves the 'group' element to the top left margin
svg = d3.select("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
// format the data
data_set.forEach(function(d) {
d.ser1 =+ d.ser1;
d.ser2 =+ d.ser2;
});
// Scale the range of the data
x.domain([0, d3.max(data_set, function(d) { return d.ser1; })]);
y.domain([0, d3.max(data_set, function(d) { return d.ser2; })]);
// Add the valueline path.
svg.append("path")
.data([data_set])
.attr("class", "line")
.attr("d", valueline);
// Add the X axis
xAxis = d3.axisBottom().scale(x);
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
// Add the Y axis
yAxis = d3.axisLeft().scale(y);
svg.append("g")
.call(yAxis);
// Add data points and tool tips
svg.selectAll(".dot")
.data(data_set)
.enter().append("circle")
.attr("class", "dot")
.attr("cx", function(d, i) { return x(d.ser1) })
.attr("cy", function(d) { return y(d.ser2) })
.attr("r", 5)
.on("mouseover", function(d) {
div.transition()
.duration(200)
.style("opacity", .9);
div .html("Ser1: "+d.ser1 + "<br/>Ser2: "+ + d.ser2)
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
div.transition()
.duration(500)
.style("opacity", 0);
});
}
更新代码:
chart.update = function() {
// format the data
data_set.forEach(function(d) {
d.ser1 =+ d.ser1;
d.ser2 =+ d.ser2;
});
// Scale the range of the data
x.domain([0, d3.max(data_set, function(d) { return d.ser1; })]);
y.domain([0, d3.max(data_set, function(d) { return d.ser2; })]);
// define the line
valueline = d3.line()
.x(function(d) { return x(d.ser1); })
.y(function(d) { return y(d.ser2); });
// update try?
var t = svg.transition().duration(750);
yAxis.scale(y);
t.select("g.y.axis").call(yAxis);
xAxis.scale(x);
t.select("g.x.axis").call(xAxis);
svg.data(data_set);
svg.select("g.y.axis")
.attr("transform", "translate(0," + height + ")")
.transition(t)
.call(xAxis);
svg.select("g.x.axis")
.transition(t)
.call(yAxis);
/*
// update no luck
svg.data(data_set);
var t = svg.transition().duration(750);
xAxis.scale(x);
t.select("g.x.axis").call(xAxis);
var axis = d3.axisBottom().scale(x);
d3.selectAll("g.x.axis")
.transition(t)
.call(axis)
*/
}
这是我的处理方式:
1将所有g元素附加到update函数之外,并为其指定一个类名,以便您可以引用它们,例如:
svg.append("g")
.attr("class","axis axis--y")
2选择一个空的类,并添加行并通过enter()
圈出新数据,例如:
var line = svg.selectAll(".lineTest")
.data([data],function(d){ return d.ser1 });
line = line
.enter()
.append("path")
.attr("class","lineTest")
.merge(line);
line.transition()
.duration(durations)
.attr("d", valueline)
3切换数据集:
data = d3.select('#selection')
.property('value') == "First" ? data_set : data_set2
这是您代码的修改版本: Plunker
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.