1

我有这段代码可以将圆圈附加到折线图上的点上。

svg.selectAll("dot")
    .data(newdata)
   .enter()
    .append("circle")
    .attr("class", "dot")
    .attr("r", 4)
    .attr("cx", function(d) { return x(newdate(d.key)); })
    .attr("cy", function(d) { return y(d.values.mean); })
    .attr("fill", "#8cc13f")
    .on("mouseover", function(d) {
        div.transition()
            .duration(200)
            .style("opacity", .9);    
        div.html("Date taken:" + "  " + newdate(d.key) + "<br/>" + "<br/>" +
                 "Average Reading:" + "  " + d.values.mean + "<br/>" + "<br/>" +
                 "Parameter:" +  "  " + selectedParameter)
           .style("left", (d3.event.pageX) + "px")
           .style("top", (d3.event.pageY - 28) + "px");
    })
    .on("mouseout", function(d) {
        div.transition()
            .duration(500)
            .style("opacity", 0);
    });

..并在我使用以下内容更新图表时尝试转换这些圆圈：

var circle = svg.selectAll("dot")
    .data(newdata);

circle
    .enter()
    .append("circle")
    .data(newdata)
    .transition()
    .duration(750)
    .attr("cx", function(d) { return x(newdate(d.key)); })
    .attr("cy", function(d) { return y(d.values.mean); })
    .attr("r", 4)
    .attr("fill", "#8cc13f");

circle
    .exit()
    .transition()
    .duration(750)
    .attr('opacity',0)
    .remove();

随着新圈子的加入，加入正在发挥作用——但由于某种原因，旧圈子没有被删除？任何人都可以帮忙吗？

4

1 回答 1

1

这里的问题是 D3 不知道如何将您的第一个数据绑定中的数据匹配到您的第二个数据（默认情况下它只使用数据数组的索引）向您的数据绑定添加一个键函数应该可以解决这个问题，它定义了 D3 将如何匹配数据。有关数据键的更多信息，请参阅 Mike Bostock 出色的Object Constancy教程。

于 2013-03-14T01:40:48.270 回答