使用特定颜色更新饼图无法按预期工作

Question

看这把小提琴(http://jsfiddle.net/gs6rehnx/2106/(，有四个弧线，有四种不同的颜色。我希望饼图在单击更新按钮后有三种颜色。但是，仍然有四个弧线。我断言，特定颜色到values的映射无法正常工作？还是其他东西不起作用？

const chart = {};
const duration = 750;
const width = 160;
const height = 160;
const min = Math.min(width, height);
const oRadius = min / 2 * 0.9;
const iRadius = min / 2.5 * 0.85;
const pie = d3
.pie()
.value(function(d) {
return d.value;
})
.sort(null);
const arc = d3
.arc()
.outerRadius(oRadius)
.innerRadius(iRadius);
function arcTween(a) {
const i = d3.interpolate(this._current, a);
this._current = i(0);
return function(t) {
return arc(i(t));
};
};
const labels = ['1', '2', '3', '4'];
const color = ["rgba(126,211,33,1)", "rgba(39,173,232,1)", "rgba(229,5,1,1)", "rgba(245,166,35,1)"];
const scale = d3.scaleOrdinal()
.domain(labels)
.range(color);
const create = function(data) {
const svg = d3
.select('.foo')
.append('svg')
.attr('class', 'pie')
.attr('width', width)
.attr('height', height)
.attr('id', 'svgClass');
svg
.append('g')
.attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')')
.attr('id', 'bar');
draw(data);
}
const draw = function(data) {
const path = d3.select('#bar')
.selectAll('path')
.data(pie(data))
path
.enter()
.append('g')
.append('path')
.attr('d', arc)
.attr('fill', (d, i) => {
return scale(d.data.name)
});
path
.transition()
.duration(duration)
.attrTween('d', function(d) {
const interpolate = d3.interpolate({
startAngle: 0,
endAngle: 0
}, d);
return function(t) {
return arc(interpolate(t));
};
});
};
const data = [{
"name": "1",
"value": 2
}, {
"name": "2",
"value": 1
}, {
"name": "3",
"value": 2
}, {
"name": "4",
"value": 1
}];
const newData = [{
"name": "1",
"value": 2
}, {
"name": "2",
"value": 1
}, {
"name": "3",
"value": 2
}];
function createPie() {
create(data)
}
function updatePie() {
draw(newData)
}

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.js"></script>

<button type="button" onclick="createPie()">Click Me First!</button>
<button type="button" onclick="updatePie()">Update Diagram!</button>
<div class='foo'></div>

Answer 1

这不起作用的原因是因为d3有三个主要部分：

• 进入
• 更新
• 退出

在上面的示例中，您正在处理enter，update不太正确，exit完全丢失。这是作者讨论数据连接的一篇非常好的文章。

进入

下面获取所有new数据元素，并为每个元素添加新的g元素。

path.enter().append('g')

退出

您缺少的以下内容将获取 DOM 中不再在数据中表示的所有项目，并删除它们。

path.exit().remove();

const chart = {};
const duration = 750;
const width = 160;
const height = 160;
const min = Math.min(width, height);
const oRadius = min / 2 * 0.9;
const iRadius = min / 2.5 * 0.85;
const pie = d3
.pie()
.value(function(d) {
return d.value;
})
.sort(null);
const arc = d3
.arc()
.outerRadius(oRadius)
.innerRadius(iRadius);
function arcTween(a) {
const i = d3.interpolate(this._current, a);
this._current = i(0);
return function(t) {
return arc(i(t));
};
};
const labels = ['1', '2', '3', '4'];
const color = ["rgba(126,211,33,1)", "rgba(39,173,232,1)", "rgba(229,5,1,1)", "rgba(245,166,35,1)"];
const scale = d3.scaleOrdinal()
.domain(labels)
.range(color);
const create = function(data) {
const svg = d3
.select('.foo')
.append('svg')
.attr('class', 'pie')
.attr('width', width)
.attr('height', height)
.attr('id', 'svgClass');
svg
.append('g')
.attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')')
.attr('id', 'bar');
draw(data);
}
const draw = function(data) {
const path = d3.select('#bar')
.selectAll('path')
.data(pie(data))
path
.enter()
.append('g')
.append('path')
.attr('d', arc)
.attr('fill', (d, i) => {
return scale(d.data.name)
});

path.exit().remove();
path
.transition()
.duration(duration)
.attrTween('d', function(d) {
const interpolate = d3.interpolate({
startAngle: 0,
endAngle: 0
}, d);
return function(t) {
return arc(interpolate(t));
};
});
};
const data = [{
"name": "1",
"value": 2
}, {
"name": "2",
"value": 1
}, {
"name": "3",
"value": 2
}, {
"name": "4",
"value": 1
}];
const newData = [{
"name": "1",
"value": 2
}, {
"name": "2",
"value": 1
}, {
"name": "3",
"value": 2
}];
function createPie() {
create(data)
}
function updatePie() {
draw(newData)
}

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.js"></script>

<button type="button" onclick="createPie()">Click Me First!</button>
<button type="button" onclick="updatePie()">Update Diagram!</button>
<div class='foo'></div>