Javascript D3.js饼图动态更新转换未按预期工作

我在让我的饼图/甜甜圈图动态更新数据方面遇到了很多困难。我对其进行了配置，以便用户滑动范围输入以选择他/她希望查看的数据月份，然后将数据传递给我的d3 visual。为了简单起见，我在示例中硬编码了数据。您可以查看以下代码段：

var宽度=450； var高度=350； var边距={左：0，上：0，右：0，下：0}； var svg=d3.selectbody .appendsvg .attrwidth，宽度+边距。右 .attrhight，height+margins.top； 风险值期间=[‘2016年1月’、‘2016年2月’、‘2016年3月’、‘2016年4月’、‘2016年5月’、‘2016年6月’， “2016年7月”、“2016年8月”、“2016年9月”、“2016年10月”、“2016年11月”、“2016年12月”]； d3.选择“时间滑块”。在“输入”上，选择函数{ 更新+此.value； }; 函数updatevalue{ document.getElementById'range'.innerHTML=period[value]； 创造周期[价值]； } 变量pie_数据={ “2016年1月”：[16,4,1,30]， ‘2016年2月’：[17,4,0,30]， “2016年3月”：[16,5,1,29]， “2016年4月”：[17,4,1,29]， “2016年5月”：[17,4,1,29]， “2016年6月”：[17,4,2,28]， “2016年7月”：[18,3,2,28]， “2016年8月”：[18,3,2,28]， “2016年9月”：[18,3,2,28]， “2016年10月”：[18,3,3,27]， “2016年11月”：[18,3,3,27]， “2016年12月”：[18,3,3,27] } 函数创建一个月{ 变量半径=数学最小宽度，高度/4； var color=d3.标度.序数.范围['darkblue'、'steelblue'、'blue'、'lightblue']； var arc=d3.svg.arc .内半径半径-50 .外半径-20； var sMonth=Stringmonth。替换“”，； var pData=pie_数据[sMonth]； var pie=d3.layout.pie .padAngle.05 .valuefunctiond{return d；} 索特努尔先生； var pieG=svg.append'g' .attr'transform'，'translate'+100+'，'+75+； var Ppath=pieG.datumpData.selectAll.pie .数据派； 帕斯 .enter.appendpath.attr'class'，'pie'； 帕斯 .attrfill，函数d，i{return colori；} .attrd，arc .每个功能{ 这是x=d.x； 这是d.dx0=d.dx； }; 帕斯 过渡 .持续时间650 .attrTweend，arcTweenUpdate； 帕斯 .退出。移除； arcTweenUpdatea函数{ var i=d3.插值{x:this.x0，dx:this.dx0}，a； 返回函数{ var b=它； 这是x=b.x； 这是1.dx0=b.dx； 返回arcb； }; } } 创建“2016年1月”； 2016年1月 下面的示例更新了您的代码，如下所示

添加了一个数据格式函数，该函数将以{label:value}格式返回数据。 更新了代码逻辑，从加载/重画数据更新到更新饼图值。 var宽度=450； 高度=350； 半径=数学最小宽度，高度/4； var color=d3.标度.序数.范围['darkblue'、'steelblue'、'blue'、'lightblue']； var pie=d3.layout.pie .valuefunctiond{return d['JAN2016']；} 索特努尔先生； var arc=d3.svg.arc .内半径半径-50 .外半径-20； var svg=d3.selectbody.appendsvg .宽度，宽度 .身高，身高 .附录 .attr'transform'，'translate'+100+'，'+75+； 风险值期间=[‘2016年1月’、‘2016年2月’、‘2016年3月’、‘2016年4月’、‘2016年5月’、‘2016年6月’， “2016年7月”、“2016年8月”、“2016年9月”、“2016年10月”、“2016年11月”、“2016年12月”]； 变量pie_数据={ “2016年1月”：[16,4,1,30]， ‘2016年2月’：[17,4,0,30]， “2016年3月”：[16,5,1,29]， “2016年4月”：[17,4,1,29]， “2016年5月”：[17,4,1,29]， “2016年6月”：[17,4,2,28]， “2016年7月”：[18,3,2,28]， “2016年8月”：[18,3,2,28]， “2016年9月”：[18,3,2,28]， “2016年10月”：[18,3,3,27]， “2016年11月”：[18,3,3,27]， “2016年12月”：[18,3,3,27] }; var path=svg.datumformatDatapie\u data.selectAllpath .数据派 .enter.appendpath .attrfill，函数d，i{return colori；} .attrd，arc .eachFunction{this.\u current=d；}；//存储初始角度 d3.选择“时间滑块”。在“输入”上，选择函数{ 改变这个价值观； }; 功能转换键{ var值=期间[键]。替换“”，； document.getElementById'range'.innerHTML=period[key]； pie.valuefunctiond{return d[value]；}；//更改value函数 path=path.datapie；//计算新角度 path.transition.duration750.attrtween，arcTween；//重新绘制圆弧 } 阿尔特韦纳函数{ var i=d3。这是一个电流，a； 该电流=i0； 返回函数{ 返回弧； }; } 函数formatDatadata{ 返回数据[Object.keysdata[0]]。mapfunctionitem，索引{ 设obj={}； Object.keysdata.forEachfunctionkey{ obj[key]=数据[key][index]//2016年1月：[index] } 返回obj； } } 2016年1月

---

我想你的方法有些问题。看看这个例子。更改滑块时，您只需更新饼图的数据，而不是重新绘制所有内容。@karan3112我知道该块，它是我灵感的一部分，非常漂亮。我不知道为什么，但我无法使用change函数处理我的月度数据。它不会抛出任何错误，但不会触发动画。我想我指出的一切都是正确的，所以我采用了这种方法。我希望有办法挽救我在这里的帖子，然后我可以分享

---

e我的更改功能问题将在以后的日期发布。但我不确定，也许其他人会说，改变是让它发挥作用的唯一途径，我必须看看。而且它不应该重画一切。它应该在过程中绘制一次。输入，然后在再次调用时进行转换。但是，是的，出于某种原因，它正在重新绘制一些东西。示例中的数据格式是这样的，即它们为init d3.tsvdata.tsv上的每个数据生成了所有路径。但是，只有在调用更改时才会显示特定路径。但是，在您的代码中，您正在更改滑块时生成路径。我想如果您在代码中更新该逻辑，它会工作得很好。@karan3112我不确定您所说的特定路径是什么意思。你是说当我设置var pData=pie_data[sMonth]？我不确定是否有办法在init上生成路径，并且仍然具有动态视觉效果。我可能错了。你在代码中的注释非常有用。有时很难弄清楚var路径和var饼在做什么。现在它更有意义了。我有点不高兴，我原来的方式似乎不起作用，但您已经演示了如何很好地适应m.Bostock的方式。我从来没有想过要使用formatData函数并将其与var path=svg.datum一起使用；我只想写一个简单的片段来说明我的动态数据更新问题。所以不管怎样，现在的问题是我不知道如何向数据中添加另一个维度。除了幻灯片界面，我还有两个单选按钮，类似于M.Bostock示例。根据单击的按钮，我希望在不同的部分对阵列进行切片。我将更新问题以向您展示。@ArashHowaida数据只在饼图中加载一次，即在init上加载。我不认为你可以根据收音值动态地减少饼图中的项目数，前4个和后4个。尽量保持简单，为每个收音机创建两个不同的饼图。有时候，重要的是要明白，我们不可能在一个单一的功能中实现一切。我觉得我现在已经非常接近了。我采用了您建议的方法，在radio select上创建一个新的饼图。我通过调用收音机select上的drawPie函数来实现这一点。我还在文章的编辑部分使用了修改后的formatData函数，该函数有单选select if子句返回.slice0,4或.slice5,8。奇怪的是，两者都返回相同的数据：slice0,4。如果您能帮助我找到在您创建的formatData函数中切片的正确方法，那么一切都将被设置好。