Question

我是论坛的新手，对于d3，任何帮助都将不胜感激。在此jsfiddle中希望：

将数据“itemLabel”链接到特定的弧色。我有12个“itemLabel”和12种颜色，希望它们保持不变。问题是当任何“itemlabel”上的数据itemValue=0随后所有弧的颜色发生变化时。我知道它为什么会改变（它跳过零数据点并在非零数据点上显示下一个颜色），我只是不知道如何修复它。我整天都读过代码但仍然没有运气。例如，当移动滑块时，“澳大利亚股票”应始终为深绿色#8BC92F。
在中间启动滑块。我知道如何将滑块放在中间，但是我希望在加载时为该位置渲染图形。

谢谢

var color = d3.scale.ordinal()
.range([ "#06a6d8", "#5CBEE6","#94CFE6", "#8BC92F", "#C1DA12", "#F2F001", "#FEB132", "#FB9400", "#EB6D00", "#F9588A", "#F22766", "#CE8AFF"]);

.attr("fill", function(d, i) { return color(i); })

Answer 1

1）您使用索引来填充细分：

.attr("fill", function(d, i) { return color(i); })

因此，在更新期间，数据的长度发生变化（itemValue=0大小写），相应弧的填充颜色也会发生变化。

您应该为color比例设置域名

const dataLabels = dataStructure[0].data
  .map(function(item) { return item.itemLabel; });

将标签数组保存到dataLabels变量

color.domain(dataLabels);

将其传递给.domain财产。之后，您可以通过标签名称获取相关颜色：

paths.enter().append("svg:path")
  .attr("stroke", "white")
  .attr("stroke-width", 2)
  .attr("fill", function(d, i) { return color(d.name); }) // <--!!!
  .transition()
    .duration(tweenDuration)
    .attrTween("d", pieTween);

paths
  .attr("fill", function(d, i) { return color(d.name); }) // <--!!!
  .transition()
    .duration(tweenDuration)
    .attrTween("d", pieTween);

2）您应该在页面加载后将要显示的数据集的索引传递给update函数，并传递给滑块配置对象的value属性。您的数据长度等于21，因此您应该传递10或11以显示中间的滑块位置。

var middleDatasetIndex = Math.floor(dataStructure.length / 2); // = 11

$( "#slider" ).slider({
    value: middleDatasetIndex, // <-- !!!
    min: 0,
    max: 21,
    step: 1,
    slide: function( event, ui ) {
        update(ui.value);
        console.log(ui.value);
      }
})
...
update(middleDatasetIndex); // <--!!!

检查the working demo。

D3饼图零数据点更改圆弧填充颜色

1 个答案: