D3.js - 更新svg路徑的標題

Question

我有一個d3餅圖，我無法確定如何更新某些SVG標題，這些標題在通過選擇更新路徑值時附加到單個路徑。

我的代碼的精簡版本如下。

我一直在嘗試不同的代碼片段，尤其是在函數change（）中，但還沒有找到它的訣竅。我沒有找到任何已發佈的好例子。

同樣，我使用路徑標題標記作爲工具提示，並試圖在更新路徑值時更新它們的文本值。

任何幫助都非常感激，因爲我在截止到本週末的這個項目。

非常感謝。

var dataset = { 
Y2012: [1000, 2000, 3000], 
Y2011: [3000, 2000, 1000], 
//etc. 
}; 

var width = 300, 
    height = 300, 
    radius = Math.min(width, height)/2; 

var pie = d3.layout.pie() 
    .sort(null); 

var arc = d3.svg.arc() 
    .innerRadius(outer_radius - 85) 
    .outerRadius(outer_radius - 50); 

var svg = d3.select(".svg_container").append("svg") 
    .attr("width", width) 
    .attr("height", height) 
    .append("g") 
    .attr("transform", "translate(" + width/2 + "," + height/2 + ")"); 

var path = svg.selectAll("path") 
    .data(pie(dataset.Y2012)) 
    .enter().append("path") 
    .attr("fill", function(d, i) { return color(i); }) 
    .attr("d", outer_arc) 
    .each(function(d) { this._current = d; }); 

var tooltips= d3.selectAll("path") 
    .append("title") 
    .classed("tooltip", true) 
    .text(function(d) { return d.value }); 

d3.selectAll("#select_year").on("change", change); 

function change() { 
    path = path.data(pie(dataset[this.value])); // update the data 
    path.transition().duration(750).attrTween("d", arcPathTween); 
} 

function arcPathTween(a) { 
    var i = d3.interpolate(this._current, a); 
    this._current = i(0); 
    return function(t) { 
    return arc(i(t)); 
    }; 
} 

Answer 1

問題是您不更新標題文本function change()。 儘管標題文本是由訪問數據的函數創建的，但您必須認識到，在更新數據時，此函數不會再自動執行。 這必須手動完成：

function change(newYear) { 
    path = path.data(pie(dataset[newYear])); // update the data 
    path.transition().duration(750).attrTween("d", arcPathTween); 
    path.select("title").text(function(d) { return d.value }); 
} 

我還創建fiddle示出的解決方案。

如果你想避免重複代碼（你應該），你可以使用general update pattern這意味着你在同一個函數中進行初始化和更新。