D3.js在此URL <a href="http://jsfiddle.net/b8eLJ/1/" rel="nofollow">http://jsfiddle.net/b8eLJ/1/</a></p> <p>中的代碼移動按鈕按下

Question

後線和一個圓我的代碼的jsfiddle是，我實現了一個後退按鈕。目標是x軸上的日曆應該及時回溯。發生這種情況時，這些線路也應該及時移回去。

我的X軸正常工作與新的領域 - 但我掙扎與線條和圓圈。

我也看了看下面的例子http://bl.ocks.org/mbostock/1166403

我有點困惑如何可以「選擇線路和移動它」或「破壞行並重新創建它。」我已經嘗試過兩種，都沒有效果。

function startFunction() { 

console.log("start"); 

endDate.setDate(endDate.getDate() - 7); 
startDate.setDate(startDate.getDate() - 7); 

//change the domain to reflect the new dates 
xScale.domain([startDate, endDate]); 

var t = svg.transition().duration(750); 
t.select(".x.axis").call(xAxis); 

//??? 
var pl = svg.selectAll("path.line"); 

pl.exit().remove(); 
} 

// INPUT 
dataset2 = [{ 
movie: "test", 
results: [{ 
    week: "20140102", 
    revenue: "5" 
}, { 
    week: "20140109", 
    revenue: "10" 
}, { 
    week: "20140116", 
    revenue: "17" 
}, ] 
}, { 
movie: "test", 
results: [{ 
    week: "20140206", 
    revenue: "31" 
}, { 
    week: "20140213", 
    revenue: "42" 
}] 
}]; 

console.log("1"); 

var parseDate = d3.time.format("%Y%m%d").parse; 

var lineFunction = d3.svg.line() 
.x(function (d) { 
return xScale(parseDate(String(d.week))); 
}) 
.y(function (d) { 
return yScale(d.revenue); 
}) 
.interpolate("linear"); 

console.log("2"); 


var endDate = new Date(); 
var startDate = new Date(); 
startDate.setDate(startDate.getDate() - 84); 



//SVG Width and height 

var margin = { 
top: 20, 
right: 10, 
bottom: 20, 
left: 40 
}; 

var w = 750 - margin.left - margin.right; 
var h = 250 - margin.top - margin.bottom; 


//X SCALE AND AXIS STUFF 

//var xMin = 0; 
//var xMax = 1000; 




var xScale = d3.time.scale() 
.domain([startDate, endDate]) 
.range([0, w]); 

console.log(parseDate("20130101")); 
console.log("3"); 

var xAxis = d3.svg.axis() 
.scale(xScale) 
.orient("bottom") 
.ticks(12); 

console.log("4S"); 

//Y SCALE AND AXIS STUFF 

//max and min test 

var minY = d3.min(dataset2, function (kv) { 
return d3.min(kv.results, function (d) { 
    return +d.revenue; 
}) 
}); 

var maxY = d3.max(dataset2, function (kv) { 
return d3.max(kv.results, function (d) { 
    return +d.revenue; 
}) 
}); 


console.log("min y " + minY); 
console.log("max y " + maxY); 


var yScale = d3.scale.linear() 
.domain([minY, maxY]) 
.range([h, 0]); 

var yAxis = d3.svg.axis() 
.scale(yScale) 
.orient("left") 
.ticks(10); 

//Create SVG element 
var svg = d3.select("body") 
.append("svg") 
.attr("width", w + margin.left + margin.right) 
.attr("height", h + margin.top + margin.bottom) 
.append("g") 
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 


console.log("4S1"); 

//CREATE X-AXIS 
svg.append("g") 
.attr("class", "x axis") 
.attr("transform", "translate(0," + (h) + ")") 
.call(xAxis); 

//Create Y axis 
svg.append("g") 
.attr("class", "y axis") 
.attr("transform", "translate(,0)") 
.call(yAxis); 

//create circle 

var movie_groups = svg.selectAll("g.metric_group") 
.data(dataset2).enter() 
.append("g") 
.attr("class", "metric_group"); 

var circles = movie_groups.selectAll("circle") 
.data(function (d) { 
return d.results; 
}); 


svg.selectAll("g.circle") 
.data(dataset2) 
.enter() 
.append("g") 
.attr("class", "circle") 
.selectAll("circle") 
.data(function (d) { 
return d.results; 
}) 
.enter() 
.append("circle") 
.attr("cx", function (d) { 
//  console.log(d[0]); 
console.log(parseDate(d.week)); 
return xScale(parseDate(d.week)); 
}) 
.attr("cy", function (d) { 
return yScale(d.revenue); 
}) 
.attr("r", 3); 


//create line 

//create line 
var lineGraph = svg.selectAll("path.line") 
.data(dataset2).enter().append("path") 
.attr("d", function (d) { 
return lineFunction(d.results); 
}) 
.attr("class", "line"); 

Answer 1

爲了澄清，及時搬回線實際上將轉化爲前進的權利，因爲他們的日期沒有變化，時間軸被移動到正確的路線。我希望我在這裏想清楚......已經很晚了。

重要的是，您的數據在點擊之間不會發生變化，所以在初始調用之後，在enter（）選擇中將不會綁定任何新數據。線條只會被繪製一次。

由於您的軸是可移動的部分，一個快速的解決方案將是保持去除線，並再次重建他們的內部startFunction，就像這樣：

var lineGraph = svg.selectAll("path.line").remove(); 
lineGraph = svg.selectAll("path.line") 
    .data(dataset2); 

我想這和它的作品。但是請注意，我並沒有從退出選擇中刪除線路，因此也沒有真正利用EUE模式（輸入/更新/退出）。但是，由於您的數據並沒有真正改變，因此我不確定您可以在點擊之間添加哪些內容，以便用作selection.data的關鍵字。我希望這可以幫助...

注：我不是特別喜歡這種解決方案，並認爲寫它作爲評論，但有太多的言辭。首先，object constancy自從我們轉向遠離EUE模式並且「圖形運動」很醜陋以來已經丟失。這可以通過添加線（路徑）的圖中的過渡延遲來減輕一些如下所示...但仍...

lineGraph.enter().append("path").transition().delay(750) 
    .attr("d", function (d) { 
     return lineFunction(d.results); 
    })