编辑22:08

Question

作为了解d3.js的项目，我正在实时地在地图上显示推文。一切都运作到目前为止，我对图书馆非常非常满意。

在页面上，我正在尝试列出所有语言。在悬停时，我希望弹出该语言的所有推文。所有这一切都已完成，除了列表中的某些项目弹出另一种语言的推文。一个错误的，我可以补充一下。

这是我在地图上投影点的方式：

points.selectAll('circle')
    .data(tweets)

    .enter()
    .append('circle')

    // Attach node to tweet, so I can use refer to the nodes later
    .each(function(d) {
        d.node = this;
    })

    .attr('r', 1);

这是我创建列表的方式：

var data = d3.nest()

    // Group by language code
    .key(function(d) { return d.lang.code; })
    .entries(tweets)

    // Sort list by amount of tweets in that language
    .sort(function(a, b) {
        return b.values.length - a.values.length;
    });


var items = languages_dom

    // Add items
    .selectAll('li')
    .data(data)
    .enter()
    .append('li');

    // Used for debugging
    .attr('data-lang', function(d) {
        return d.key; // Group key = language code
    })

    // Set text
    .text(function(d) {
        var dt = d.values[0];
        return dt.lang.name;
    })

    // Mouseover handler
    .on('mouseover', function(d) {

        // Compare attribute with 
        // These values are actually different
        var attr = d3.select(this).attr('data-lang');
        console.log(attr, d.key);

        // Pop up each node
        d.values.forEach(function(d) {
            d = d3.select(d.node);

            d.transition()
                .duration(200)
                .attr('opacity', 0.5)
                .attr('r', 8);
        });
    });

请注意，上面的脚本会多次运行。 d.key在链中稍后引用另一个值，而我不修改该链中的数据。

编辑22:08

当我没有对数据进行排序时，事情似乎正常。至少它是一个领先者。

Answer 1

如评论中所述，您在forEach函数中覆盖了d。相反，你应该尝试像

这样的东西

    d.values.forEach(function(p) {
        d3.select(p.node)
            .transition()
            .duration(200)
            .attr('opacity', 0.5)
            .attr('r', 8);
    });

请注意，forEach变量名为p而不是d。

Answer 2

随着数据的变化，旧数据似乎以某种方式保留。

无论哪种方式，我只是在应用新数据之前删除了列表：

languages_dom
    .selectAll('li')
    .remove();

不能说这是优雅的，也不是高效的，但它完成了工作：）

d3.js迭代订单更改

编辑22:08

2 个答案: