Question

我正在尝试在d3中使用attrTween在页面加载时为饼图设置动画，但它对我不起作用。我之前使用attrTween来动画数据的变化并且它工作正常但是这次我想在首先加载页面时“增长”饼图，但它没有按预期运行，我没有得到任何关于为什么会这样。如果我删除行.attrTween('d' arcTweenStart);，那么一切正常，除了它当然没有动画。如果该行保留，则不显示任何内容，并且永远不会输入arcTweenStart功能。谁能找到我出错的地方？

function drawCharts()
{
    // Create the chart and bind the data to it and position it
    var pieChart = d3.select("#groupRisk").selectAll("svg")
        .data(dataSet) // Bind the data to the chart
        .enter().append("svg")
            .attr("id", "pie")
            .attr("width", w) // Set th width
            .attr("height", h) // Set the height
        .append("g")
            .attr("transform", "translate(" + radius + "," + radius + ")"); // Position the chart

    // Create the pie chart layout
    var pie = d3.layout.pie()
        .value(function(d) { return d.count; })
        .sort(null); // Sort is set to null to allow for better looking tweens

    // Create "slices" for each data element
    var arcs = pieChart.selectAll("g.slice")
        .data(pie) // Bind the pie layout to the slices
        .attr("id", "arcs")
        .enter()
            .append("g")
            .attr("class", "slice");

    // Create the graphics for each slice and colour them
    arcs.append("path")
        .attr("fill", function(d, i) { return color(i); })
        .attr("d", arc)
        .each(function(d) { this._current = d; })
            .transition()
            .duration(500)
            .attrTween('d' arcTweenStart);

}

function arcTweenStart(b) 
{
    var start = 
    {
        startAngle: b.startAngle,
        endAngle: b.endAngle
    };
    var i = d3.interpolate(start, b);
    return function(t) 
    { 
        return arc(i(t)); 
    };
}

修改我的数据集如下所示：

var dataSet= 
[
    [
        { "label": "Green", "count": 40 }, 
        { "label": "Amber", "count": 50 },
        { "label": "Red", "count": 10 }
    ],
    [
        { "label": "Green", "count": 20 }, 
        { "label": "Amber", "count": 30 },
        { "label": "Red", "count": 50 }
    ],
    [
        { "label": "Green", "count": 50 }, 
        { "label": "Amber", "count": 20 },
        { "label": "Red", "count": 30 }
    ]
];

我有一组数据集，所以我想为每个数据集绘制一个图表。

Answer 1

您不会显示您的User-agent: * Disallow:变量所持有的内容（真的有助于回答这个问题！），但假设您的数据如下所示：

dataSet

您不需要进行第一次绑定/输入：

var dataSet = [{
    count: 4
  }, {
    count: 5
  }, {
    count: 6
}];

这将为您提供数据中每个条目的饼图。摆脱它，然后你的绑定变成：

d3.select("#groupRisk").selectAll("svg")
    .data(dataSet) // Bind the data to the chart
    .enter()
    ...

但实际上，问题的核心是你的补间var arcs = pieChart.selectAll("g.slice") .data(pie(dataSet)) //<-- call pie with the dataSet .attr("id", "arcs") .enter() .append("g") .attr("class", "slice");，它与你想要结束的开始/结束角度相同。所以，你一遍又一遍地制作相同的动画。我认为你的意思是：

var start

哦，还有一个错字：

function arcTweenStart(b) {
  var start = {
    startAngle: b.startAngle,
    endAngle: b.startAngle //<-- set end to start and adjust on each call
  };
  var i = d3.interpolate(start, b);
  return function(t) {
    return arc(i(t));
  };
}

示例here。

D3js饼图动画加载不起作用

1 个答案: