我已经在StackOverflow中搜索了更新饼图的许多示例,并查看了与d3.js中更新饼图相关的d3.js块,但我似乎无法使用简单的更新d3.js版本4.我确定我错过了一些至关重要的东西,但我没有看到它。想法是点击"更新"按钮只会将数据更改为不同的集合,只有一个元素不同。我有一个小提琴(plunker),它显示了我在这一点上的代码(或不作为,视情况而定)。
对更新功能的初始调用会根据第一个数据集创建饼图,但第二个调用会由"更新"按钮,什么都不做。我知道派对生成器正在生成正确的对象(我检查了要检查的对象),但没有重绘路径。
以下是代码:
{{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;