如何构建响应滑块的森伯斯特图

时间:2018-11-12 22:32:16

标签: d3.js

我正在尝试使用交互式滑块构建森伯斯特图。更具体地说,我希望基于日期的滑块根据与这些切片相关的日期在旭日形中出现和消失这些切片。

我同时创建了滑块和森伯斯特,但无法使它们协同工作。

http://plnkr.co/edit/YIHd7o3fQ9RLFuN5PWVa?p=preview

我认为问题出在'updateData'函数中,该函数将滑块选择的日期与与每个数据点关联的日期进行比较。更具体地说,获取切片日期的语法似乎不正确,因为console.log()为“ null”值。

我尝试过的事情:

要检查语法,我将d.data.Cattime替换为d.data.id。后者将数据集信息记录到控制台-提示语法正确。奇怪的是,这不适用于d.data.parentId。

我认为问题可能是Cattime标题下的项目没有表示为日期。但是此代码console.log(parseDate(data[1].Cattime));建议将此日期识别为日期。

任何建议表示赞赏。

1 个答案:

答案 0 :(得分:1)

您应该在return语句中比较两个日期对象。

svg.selectAll(".node").style("fill", function(d) {
   return new Date(((d.data.data.Cattime))) > new Date(h) ? "red" : "black";
}

此外,最初,您将路径的填充颜色设置为样式属性,但是在更新功能中,将其设置为属性。

显然,稍后将其设置为属性时,其值不会改变。因此,可以将更新功能更改为样式,或者将初始化更改为属性。

working example