[英]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.