在d3.js中更新饼图

时间:2017-05-09 22:32:05

标签: javascript d3.js charts

我已经在StackOverflow中搜索了更新饼图的许多示例,并查看了与d3.js中更新饼图相关的d3.js块,但我似乎无法使用简单的更新d3.js版本4.我确定我错过了一些至关重要的东西,但我没有看到它。想法是点击"更新"按钮只会将数据更改为不同的集合,只有一个元素不同。我有一个小提琴(plunker),它显示了我在这一点上的代码(或不作为,视情况而定)。

对更新功能的初始调用会根据第一个数据集创建饼图,但第二个调用会由"更新"按钮,什么都不做。我知道派对生成器正在生成正确的对象(我检查了要检查的对象),但没有重绘路径。

以下是代码:

{{1}}

1 个答案:

答案 0 :(得分:0)

现在,你只有一个"输入"和#34;退出"在更新功能中选择。

你必须创建一个"更新"选择,像这样:

var u = d3.select('g')
    .selectAll('path');

u.data(arcData)
    .enter()
    .append('path')
    .merge(u)
    .attr('d', arcGenerator)
    .each(function(d) {
        d3.select(this)
            .style('fill', function(d) {
                return colorScale(d.data.name);
            })
    });

u.exit().remove();

这是你更新的(没有双关语)小提琴:https://jsfiddle.net/qbjt80ts/

Stack代码段中的相同代码:



var pieGenerator = d3.pie()
  .value(function(d) {
    return d.quantity;
  })
  .sort(function(a, b) {
    return a.name.localeCompare(b.name);
  });

var fruits = [{
  name: 'Apples',
  quantity: 20
}, {
  name: 'Bananas',
  quantity: 40
}, {
  name: 'Cherries',
  quantity: 50
}, {
  name: 'Damsons',
  quantity: 10
}, {
  name: 'Elderberries',
  quantity: 30
}, ];
var fruits2 = [{
  name: 'Blueberries',
  quantity: 40
}, {
  name: 'Bananas',
  quantity: 40
}, {
  name: 'Cherries',
  quantity: 50
}, {
  name: 'Damsons',
  quantity: 10
}, {
  name: 'Elderberries',
  quantity: 30
}, ];

function doUpdate() {
  update(fruits2);
}

// Create an arc generator with configuration
var arcGenerator = d3.arc()
  .innerRadius(75)
  .outerRadius(200)
  .padAngle(.02)
  .padRadius(100)
  .cornerRadius(4);

function update(myData) {

  var arcData = pieGenerator(myData);
  var colorDomain = myData.map(function(a) {
    return a.name;
  });
  var colorScale = d3.scaleOrdinal()
    .domain(colorDomain)
    .range(['#ff2800', '#58595B', '#006c93', '#8D2048', '#00746F'])

  // Create a path element and set its d attribute
  var u = d3.select('g')
    .selectAll('path');

  u.data(arcData)
    .enter()
    .append('path')
    .merge(u)
    .attr('d', arcGenerator)
    .each(function(d) {
      d3.select(this)
        .style('fill', function(d) {
          return colorScale(d.data.name);
        })
    });

  u.exit().remove();
}
update(fruits);

path {
  fill: orange;
  stroke: white;
}

text {
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
  fill: white;
  text-anchor: middle;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
<div id="menu">
  <button onClick="doUpdate();">Update</button>
</div>
<svg width="700" height="500">
  <g transform="translate(300, 250)"></g>
</svg>
&#13;
&#13;
&#13;