D3餅圖過渡

Question

我正在研究D3js中的過渡，試圖使它們使用源自Mike Bostock示例的簡單餅圖。

我想將餅圖中的數據從data過渡到data2，但圖表不會更新。

這是過渡語句：

path.selectAll("path").data(pie(data2)).transition().duration(2000);

我想念什么？

編輯

我已經與下面的工作。 現在，我想了解為什么這可行。 我了解.attr（“ d”，arc）部分，但是為什么我需要selectAll（“ path”）？

path.selectAll("path").data(pie(data2)).transition().duration(2000).attr("d",arc);

結束編輯

完整的代碼（ 此處為JSFiddle ）：

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

var color = d3.scale.category20();
var data = [2, 19, 18, 99, 100];
var data2 = [100, 1200, 20, 88, 12];

var pie, arc, svg, path, data;

var chartCanvas = d3.select("#chart")
    .append("svg")
    .attr("width", width)
    .attr("height", height);


var path = chartCanvas
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");



function setupPieChart() {

    pie = d3.layout.pie()
        .value(function (d) {
            return d;
        })
        .sort(null);

    arc = d3.svg.arc()
        .innerRadius(radius - 100)
        .outerRadius(radius - 20)

    path
        .selectAll("path")
        .data(pie(data))
        .enter()
        .append("path")
        .attr("fill", function (d, i) {
            return color(i);
        })
        .attr("d", arc)
        .each(function (d) {
                        this._current = d;
        }); // store the initial angles
    console.log(path);

}

setupPieChart();

console.log(path);

path.selectAll("path").data(pie(data2)).transition().duration(2000);

Answer 1

.transition為在其后聲明的屬性更改啟動過渡 。 .transition之后，您無需設置/執行任何操作，因此無需插值。 在Mike的原始示例中，您將看到他在開始過渡后設置了d屬性，並指定了一個自定義插值器（ arcTween ）

Answer 2

我立即看到您缺少更新過程中的一些重要部分。 您復制了原始代碼，但忘記了更新部分：-)。 我可以說，因為我在您的代碼中看到您存儲了初始角度。

再次查看此處的代碼，並嘗試了解arcTween函數。 可以在此處找到更多信息。 您需要一個圓弧補間函數來根據初始角度計算新角度（這就是為什么將初始角度存儲在第一位的原因：-）。

目前，我不會進行任何提琴操作，因為根據我的經驗，如果您嘗試了解圓弧補間功能（如我在此處所做的那樣，會學到更多）。這是我的個人項目的鏈接，但請隨時復制您認為合適的代碼）。

您需要.selectAll（“ path”），因為這些是將要更新的實際元素。 在執行d3時，請嘗試將圖表元素考慮如下：尚不可見的元素（屬於enter集合），現在可見的元素（可以視為update集合）和可以刪除的元素（退出集合）。

您需要根據要可視化的數據查看那些元素。 D3是數據驅動的文檔，因此所有內容都與您要在屏幕上顯示的數據有關：如果您有數據但還沒有元素，則可以對元素進行“輸入”。 因此，您選擇了一些不在DOM中但很快就會出現的元素，因為您會將它們綁定到您擁有的數據上。

如果屏幕上已經有元素，並且元素的數量與您需要顯示的數據相匹配（例如：var data = [20，30，40]，則您在屏幕上獲得了3個div的3個數據，您獲得了匹配的數量），則d3將更新您的選擇（因此，更新集合或更新選擇），因此元素屬性與數據匹配。

如果屏幕上有更多元素，則有數據要顯示，那么您可以退出元素（再次選擇退出或集合）。 我希望這可以使它更加清楚，並且也很有意義:-)