Question

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

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

以下是代码：

{{1}}

Answer 1

现在，你只有一个＆＃34;输入＆＃34;和＃34;退出＆＃34;在更新功能中选择。

你必须创建一个＆＃34;更新＆＃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代码段中的相同代码：

＆＃13;

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);

＆＃13;

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

＆＃13;

<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;

在d3.js中更新饼图

1 个答案: