D3餅圖中的每個選擇

Question

目前我正在嘗試設計動態餅圖，餅圖的切片將根據隨機生成的數據發生變化。 下面是代碼。

 var dataset = [ { name: 'Smooth', percent: 40.00, class: 'custom-normal' }, { name: 'Moderate', percent: 10.00, class: 'custom-warning' }, { name: 'Heavy', percent: 50.00, class: 'custom-danger' } ]; var width = 960, height = 500, radius = Math.min(width, height) / 2; //Math.min return the smallest value between width and height (for optimization purposes) var colorValues = d3.scaleOrdinal().domain(["Smooth", "Moderate", "Heavy"]).range(["#605A4C", "#ff9900", "#ff1a1a"]); var percent = "percent"; //predefine the legend of dataset (the string index) var category = "class"; var name = "name"; var pie = d3.pie() .value(function(d) { return d[percent]; }) .sort(null) .padAngle(.02); //the gap var arc = d3.arc() .innerRadius(radius - 100) //optimization .outerRadius(radius - 20); //optimization var svg = d3.select("#chart") .append("svg") .attrs({ width: width, height: height, class: "shadow" }).append("g") .attrs({ transform: 'translate(' + width / 2 + ',' + height / 2 + ')' }); svg.append('g') .attrs({ class: 'slices' }); var path = svg.select('.slices') .selectAll('path') .data(pie(dataset)) .enter().append('path') .attrs({ d: arc }).each(function(d, i) { this._current = d; console.log(this._current); console.log('okay!'); }).attrs({ class: function(d, i){ return d[category]; }, fill: function(d, i) { console.log("this is color value" + colorValues()); return colorValues(d[i]); } }); //initial details (this._current) var randomGenerator = setInterval(function() { var data = dataset.map(function(d, i) { for (var key in d) { if (d[key] === "Smooth") { //console.log("smooth"); dataset[0].percent = Math.floor(Math.random() * 100); //console.log(dataset[0].percent); } else if (d[key] === "Moderate") { dataset[1].percent = Math.floor(Math.random() * 100); //console.log(dataset[1].percent); //console.log("moderate"); } else if (d[key] === "Heavy") { dataset[2].percent = Math.floor(Math.random() * 100); //console.log(dataset[2].percent); //console.log("heavy"); } } }); }, 3000); var timer = setInterval(function() { pie.value(function(d) { return d[percent]; }); // change the value function path = path.data(pie(dataset)); // compute the new angles path.transition().duration(750).attrTween("d", arcTween); // redraw the arcs }, 3000); // Store the displayed angles in _current. // Then, interpolate from _current to the new angles. // During the transition, _current is updated in-place by d3.interpolate. function arcTween(a) { var i = d3.interpolate(this._current, a); console.log(this._current); this._current = i(0); return function(t) { return arc(i(t)); }; }

 body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; margin: auto; position: relative; width: 960px; }

 <meta charset="utf-8"> <div id="mydiv" class="widget"> <div id="chart" class="Chart chart-container"></div> </div> <script src="https://d3js.org/d3.v4.js"></script> <script src="https://d3js.org/d3-selection-multi.v0.4.min.js"></script>

請注意，每個切片的顏色沒有按照我之前定義的進行縮放。 即： var colorValues = d3.scaleOrdinal().domain(["Smooth", "Moderate", "Heavy"]).range(["#605A4C", "#ff9900", "#ff1a1a"]); . 我認為這應該是選擇問題，但是我對此一無所知。 然而，類也是如此，它只獲取var dataset的第一行var dataset並應用於所有var dataset 。

Answer 1

如果我理解正確，

通過餅函數推送您的數據，您正在更改您的數據。 雖然您的初始結構是：

{ name: 'Smooth', percent: 40.00, class: 'custom-normal' }

通過 pie 函數運行這些數據后，綁定到每個弧的數據具有以下結構：

{
  "data": {
    "name": "Heavy",
    "percent": 48,
    "class": "custom-danger"
  },
  "index": 2,
  "value": 50,
  "startAngle": 3.1515926535897933,
  "endAngle": 6.283185307179586,
  "padAngle": 0.02
}

在您的代碼中，您正在根據以下內容為楔形着色：

fill: function(d, i) {
    console.log("this is color value" + colorValues());
    return colorValues(d[i]);
}

的d在function(d) {}指的是數據，因此它只是在輸入數據中的單個項（綁定到特定的電弧基准），這是一個對象-使用d的[數字]建議您預期一個數組。 無論如何，每次運行此函數時，您都會得到undefined 。

而是訪問您想要的數據的屬性： name （我假設）並使用：

fill: function(d, i) {
    console.log("this is color value" + colorValues());
    return colorValues(d.data.name);
}

 var dataset = [ { name: 'Smooth', percent: 40.00, class: 'custom-normal' }, { name: 'Moderate', percent: 10.00, class: 'custom-warning' }, { name: 'Heavy', percent: 50.00, class: 'custom-danger' } ]; var width = 960, height = 500, radius = Math.min(width, height) / 2; //Math.min return the smallest value between width and height (for optimization purposes) var colorValues = d3.scaleOrdinal().domain(["Smooth", "Moderate", "Heavy"]).range(["#605A4C", "#ff9900", "#ff1a1a"]); var percent = "percent"; //predefine the legend of dataset (the string index) var category = "class"; var name = "name"; var pie = d3.pie() .value(function(d) { return d[percent]; }) .sort(null) .padAngle(.02); //the gap var arc = d3.arc() .innerRadius(radius - 100) //optimization .outerRadius(radius - 20); //optimization var svg = d3.select("#chart") .append("svg") .attrs({ width: width, height: height, class: "shadow" }).append("g") .attrs({ transform: 'translate(' + width / 2 + ',' + height / 2 + ')' }); svg.append('g') .attrs({ class: 'slices' }); var path = svg.select('.slices') .selectAll('path') .data(pie(dataset)) .enter().append('path') .attrs({ d: arc }).each(function(d, i) { this._current = d; console.log(this._current); console.log('okay!'); }).attrs({ class: function(d, i){ return d.data.class; }, fill: function(d, i) { console.log("this is color value" + colorValues()); return colorValues(d.data.name); } }); //initial details (this._current) var randomGenerator = setInterval(function() { var data = dataset.map(function(d, i) { for (var key in d) { if (d[key] === "Smooth") { //console.log("smooth"); dataset[0].percent = Math.floor(Math.random() * 100); //console.log(dataset[0].percent); } else if (d[key] === "Moderate") { dataset[1].percent = Math.floor(Math.random() * 100); //console.log(dataset[1].percent); //console.log("moderate"); } else if (d[key] === "Heavy") { dataset[2].percent = Math.floor(Math.random() * 100); //console.log(dataset[2].percent); //console.log("heavy"); } } }); }, 3000); var timer = setInterval(function() { pie.value(function(d) { return d[percent]; }); // change the value function path = path.data(pie(dataset)); // compute the new angles path.transition().duration(750).attrTween("d", arcTween); // redraw the arcs }, 3000); // Store the displayed angles in _current. // Then, interpolate from _current to the new angles. // During the transition, _current is updated in-place by d3.interpolate. function arcTween(a) { var i = d3.interpolate(this._current, a); console.log(this._current); this._current = i(0); return function(t) { return arc(i(t)); }; }

 body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; margin: auto; position: relative; width: 960px; }

 <meta charset="utf-8"> <div id="mydiv" class="widget"> <div id="chart" class="Chart chart-container"></div> </div> <script src="https://d3js.org/d3.v4.js"></script> <script src="https://d3js.org/d3-selection-multi.v0.4.min.js"></script>