我尝试使用多个饼图绘制图表，并且每个图表在一个tspan容器内绘制两个中心text标签。提供每个子图的单独数据并初始绘图。
但是，单击其中一个setX按钮时，tspan内容不会更新 - 与弧形（我在此处隐藏的代码）形成对比。
然而，当我按var centerTextGroup = ggEnter.append("text")替换var centerTextGroup = graphGroup.append("text")时，drawChart会绘制一个新文本组元素，我也不想这样做。
如何解决此问题并使drawCharts正确更新tspans？
编辑：一个解决方案可能是在graphGroup.selectAll("text").remove();之前使用var centerTextGroup = graphGroup.append("text")，它有效，但我强烈怀疑这不是d3做事方式......
var config = {
width: 150,
height: 100,
circleYCenter: 50,
circleXCenter: 75,
circleRad: 50,
circleWidth: 15,
arcWidth: 20,
};
var svgContainer = null;
function drawCharts(data) {
var container = svgContainer.select("#bigCircleGroup");
var graphGroup = container.selectAll("g.graphGroup").data(data);
var ggEnter = graphGroup.enter().append("g").attr({
transform: function(d, i) {
return "translate(" + (config.width * i) + ",0)";
},
class: "graphGroup",
id: function(d, i) {
return "bigCircle" + i;
}
});
graphGroup.exit().remove();
//Standard, common background arc. Append to enter selection, needs only to be drawn once per graph
var circleArc = d3.svg.arc().innerRadius(config.circleRad - (config.circleWidth / 2)).outerRadius(config.circleRad + (config.circleWidth / 2)).startAngle(0).endAngle(Math.PI * 2);
ggEnter.append("path").attr({
"d": circleArc,
"transform": "translate(" + (config.circleXCenter) + "," + (config.circleYCenter) + ")",
"stroke": "none",
"fill": "#ececec"
});
//Label. Group and labels should be drawn once per graph, but updated every time
var centerTextGroup = ggEnter.append("text").attr({
"x": config.circleXCenter,
"y": config.circleYCenter,
"class": "center"
}).style({
"text-anchor": "middle",
"alignment-baseline": "baseline",
"font-size": "30px",
"fill": "#5d5d5d"
});
var bigDigitLabel = centerTextGroup.append("tspan").style("alignment-baseline", "baseline").attr("class", "bigDigit").text(function(d) {
return d.text.center;
});
var unitLabel = centerTextGroup.append("tspan").style("font-size", "20px").attr("dy", 0).text(function(d) {
return d.text.unit;
});
//Draw arcs here (removed for brevity)
}
$(document).ready(function() {
svgContainer = d3.select("svg");
$("#set1").click(function() {
drawCharts([{
"data": [{
"value": "0.5",
"color": "pink"
}, {
"value": "0.3",
"color": "lightblue"
}],
"text": {
"center": 50,
"unit": "%"
}
}, {
"data": [{
"value": "0.7",
"color": "pink"
}, {
"value": "0.3",
"color": "lightblue"
}],
"text": {
"center": 70,
"unit": "%"
}
}]);
}).click();
$("#set2").click(function() {
drawCharts([{
"data": [{
"value": "0.1",
"color": "pink"
}, {
"value": "0.05",
"color": "lightblue"
}],
"text": {
"center": 10,
"unit": "%"
}
}, {
"data": [{
"value": "1",
"color": "pink"
}, {
"value": "0",
"color": "lightblue"
}],
"text": {
"center": 100,
"unit": "%"
}
}]);
});
$("#set3").click(function() {
drawCharts([{
"data": [{
"value": "0.1",
"color": "pink"
}, {
"value": "0.5",
"color": "lightblue"
}],
"text": {
"center": 10,
"unit": "%"
}
}]);
});
$("#set4").click(function() {
drawCharts([{
"data": [{
"value": "0.1",
"color": "pink"
}, {
"value": "0.5",
"color": "lightblue"
}],
"text": {
"center": 10,
"unit": "%"
}
}, {
"data": [{
"value": "0.1",
"color": "pink"
}, {
"value": "0.5",
"color": "lightblue"
}],
"text": {
"center": 10,
"unit": "%"
}
}, {
"data": [{
"value": "0.9",
"color": "pink"
}, {
"value": "0.1",
"color": "lightblue"
}],
"text": {
"center": 10,
"unit": "%"
}
}, ]);
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg width=450 height=100 style="display:block;">
<g id="bigCircleGroup"></g>
</svg>
<button id="set1">set1</button>
<button id="set2">set2</button>
<button id="set3">set3</button>
<button id="set4">set4</button>
答案 0 :(得分：1)
因此，对于更改的数据，enter适用于新数据点。有一个比喻update可以应用于enter之前的已更改数据点，或often the case，适用于新enter ed和现有数据点＆＃39;元素，最后exit适用于已删除的数据点。所以它会变得有点复杂但是如果你可以清理并重用你在进入update后enter步之后设置数据的方式，你可以得到更多符合d3的方法正在努力帮助您编写数据驱动的文档。还有一些方法可以使用d3和没有jquery来启用点击功能，但是我假设页面的其他部分使用jquery，因此它实际上对你免费。
var dataSets = [
// Set One: 2 Datapoints
[{
"data": [{"value": "0.5","color": "pink"},
{"value": "0.3","color": "lightblue"}],
"text": {"center": 50, "unit": "%"}
},{
"data": [{"value": "0.7", "color": "pink"},
{"value": "0.3", "color": "lightblue"}],
"text": {"center": 70, "unit": "%"}
}],
// Set Two: 2 Datapoints
[{
"data": [{"value": "0.1", "color": "pink"},
{"value": "0.05", "color": "lightblue"}],
"text": {"center": 10, "unit": "%"}
}, {
"data": [{"value": "1", "color": "pink"},
{"value": "0", "color": "lightblue"}],
"text": {"center": 100, "unit": "%"}
}],
// Set Three: 1 Datapoints
[{
"data": [{"value": "0.1", "color": "pink"},
{"value": "0.5", "color": "lightblue"}],
"text": {"center": 10, "unit": "%"}
}],
// Set Four: 3 Datapoints
[{
"data": [{"value": "0.1", "color": "pink"},
{"value": "0.5", "color": "lightblue"}],
"text": {"center": 10, "unit": "%"}
},{
"data": [{"value": "0.1", "color": "pink"},
{"value": "0.5", "color": "lightblue"}],
"text": {"center": 10, "unit": "%"}
},{
"data": [{"value": "0.9", "color": "pink"},
{"value": "0.1", "color": "lightblue"}],
"text": {"center": 10, "unit": "%"}
}]];
var config = {
width: 150,
height: 100,
circleYCenter: 50,
circleXCenter: 75,
circleRad: 50,
circleWidth: 15,
arcWidth: 20,
};
var svgContainer = null;
function drawCharts(setIndex) {
var container = svgContainer.select("#bigCircleGroup");
var graphGroup = container.selectAll("g.graphGroup").data(dataSets[setIndex]);
var ggEnter = graphGroup.enter().append("g").attr({
transform: function(d, i) {
return "translate(" + (config.width * i) + ",0)";
},
class: "graphGroup",
id: function(d, i) {
return "bigCircle" + i;
}
});
//Standard, common background arc. Append to enter selection, needs only to be drawn once per graph
var circleArc = d3.svg.arc().innerRadius(config.circleRad - (config.circleWidth / 2)).outerRadius(config.circleRad + (config.circleWidth / 2)).startAngle(0).endAngle(Math.PI * 2);
ggEnter.append("path").attr({
"d": circleArc,
"transform": "translate(" + (config.circleXCenter) + "," + (config.circleYCenter) + ")",
"stroke": "none",
"fill": "#ececec"
});
//Label. Group and labels should be drawn once per graph, but updated every time
ggEnterText = ggEnter.append("text");
ggEnterText.append("tspan").attr("class", "bigDigit");
ggEnterText.append("tspan").attr("class", "unit");
graphGroup.exit().remove(); // No need to update items that will be removed.
setText(graphGroup.select("text")); // Notice:
// this applies to newly appended items that were entered
// and to existing items that were not entered and need updating.
//Draw arcs here (removed for brevity)
// [probably need to handle both append and update as labels do]
}
function setText(selection) {
selection = selection.transition();
selection.attr({
"x": config.circleXCenter,
"y": config.circleYCenter,
"class": "center"
}).style({
"text-anchor": "middle",
"alignment-baseline": "baseline",
"font-size": "30px",
"fill": "#5d5d5d"
});
selection.select(".bigDigit").style("alignment-baseline", "baseline").text(function(d) {
return d.text.center;
});
selection.select(".unit").style("font-size", "20px").attr("dy", 0).text(function(d) {
return d.text.unit;
});
}
$(document).ready(function() {
svgContainer = d3.select("svg");
$("#set1").click(function() {drawCharts(0);}).click();
$("#set2").click(function() {drawCharts(1);});
$("#set3").click(function() {drawCharts(2);});
$("#set4").click(function() {drawCharts(3);});
});.ref {width:100%;padding:1em 5em;}
.ref a{font-family:sans-serif;font-size:2em;text-decoration:none;}<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg width=450 height=100 style="display:block;">
<g id="bigCircleGroup"></g>
</svg>
<button id="set1">set1</button>
<button id="set2">set2</button>
<button id="set3">set3</button>
<button id="set4">set4</button>
<div class="ref"><a href="https://bl.ocks.org/mbostock/3808218">See Also</a></div>
答案 1 :(得分：0)
D3方式是：
1 - enter - incoming elements, entering the stage.
2 - update - persistent elements, staying on stage.
3 - exit - outgoing elements, exiting the stage.
您需要更新。这就是为什么你必须删除并重新创建以更新
看看这个：Three Little Circles