Question

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

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();

在添加新圈子时，联接正在运作 - 但由于某种原因，旧的圈子没有被删除？有人可以帮忙吗？

Answer 1

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

更新时转换圈子和工具提示

1 个答案: