Question

我正在进行d3可视化，并且我有一个计时器来控制事件的顺序。我想要做的是显示一个条形图（它同时在后台显示地图上的相应数据点），然后显示另一个条形图（它还将同时显示该条形图在地图上的对应数据点）。 / p>

我能够使它在第一个集合中起作用，包括让数据点出现然后在地图上消失，但是我无法使其在第二个集合中起作用。我的理论是我在标记属性（例如类/ ID）方面做得不正确。但是也许不是。任何帮助将不胜感激。

以下是相关代码：

var cities2010 = svg.append("g");

cities2010.selectAll(".city_2010")
        .data(crimes)
        .enter().append("circle")
        .attr("class", "city_2010")
        .attr('id', function (d) { return "id_2010_" + d.rank_pop; })
        .style("fill-opacity", 0)
        .style("fill", "#DA6761")
        .attr("r", 0)
        .attr("cx", function (d) { return projection([d.longitude, 
        d.latitude])[0]; })
        .attr("cy", function (d) { return projection([d.longitude, 
        d.latitude])[1]; });

... 这部分有效

    cities2010.selectAll(".city_2010").attr("id", "dot1")
    .filter(function(d) { return d.Characteristics == "Sticky" && 
    "Gooey" && "Tasty";}) 
    .transition().delay(delay*1).ease(d3.easeLinear).duration(2000)
    .attr("r", function(d) {return rScale(d.NumberOfVictims);})
    .style("fill-opacity", 1);


    cities2010.selectAll(".city_2010").attr("id", 
    "dot1").transition().delay(delay*3).duration(1000) 
    .style("opacity",0).remove();

然后发生了更多的事情，其他所有东西都正常工作，但是随后我尝试使用以下代码复制以前的操作，而无法在背景中填充点

    cities2010.selectAll(".city_2010").attr("id", "dot2") 
    .filter(function(d) { return d.Characteristics == "Sour" && 
    "Bitter" && "Creamy";}) 
    .transition().delay(delay*4).ease(d3.easeLinear).duration(2000)
    .attr("r", function(d) {return rScale(d.NumberOfVictims);})
    .style("fill-opacity", 1);


    cities2010.selectAll(".city_2010").attr("id", 
    "dot2").transition().delay(delay*6).duration(1000) 
    .style("opacity",0).remove();

D3.js-尝试获取第二组数据点进行填充

0 个答案: