Question

我正在创建一个力图，其中节点代表政治候选人为圆圈。每个圆的半径对应候选人的支持率（百分比）。我有三年的数据。它来自.CSV文件。我在d3.js工作，我还是很新。

我要做的是动态更新每个节点对象，使半径反映当前选定的年份。加载图表工作正常：第一年（2013年）有效。但是，当我切换到2012时，DOM元素不会改变：它们保留了2013年的价值。以下是相关的代码片段：

打开CSV通话后：

        data.forEach(function(d) {

            var node = {
                id: d.id,
                name: d.candidate,
                value: (parseInt(d["y"+year])),
                radius: (parseInt(d["y"+year], 10))*3,
                party: d.cand_party,
                sex: d.gender
            };
            nodes.push(node);
            });

这是我想要做的更新：

        d3.select(window).on("keydown", function() {
                switch (d3.event.keyCode) {
                case 37: year = Math.max(year0, year - 1); break;
                case 39: year = Math.min(year1, year + 1); break;
                }
                update ();
            });

            function update() {

            title.text(year);

            circles.transition(1500)
                .attr("r", function(d) { return d.radius; });
            };

update()功能正在运行，因为我的title正在根据需要切换到2012。但是，当我检查每个节点的DOM信息时，我发现radius和value保留了2013年的值（圈子不会改变大小）。

任何建议表示赞赏，谢谢。

Answer 1

发布太快了！根据Lars的评论，我发现这很有效：

        data.forEach(function(d) {

            var node = {
                id: d.id,
                name: d.candidate,
                value: (parseInt(d["y"+year])),
                radius2014: (parseInt(d.y2014, 10))*3,
                radius2013: (parseInt(d.y2013, 10))*3,
                radius2012: (parseInt(d.y2012, 10))*3,
                party: d.cand_party,
                sex: d.gender
            };
            nodes.push(node);
            });

然后调用这样的东西：

            function update() {

            title.text(year);

            circles.transition(1500)
                .attr("r", function(d) { return d["radius"+year]; });
            };

d3js：动态更新节点对象

1 个答案: