나는 이런 식으로 뭔가 할 노력하고있어

Question

: 대신 나는 매년의 버튼을 클릭 할 때 표시 할 전환을 원하는 마우스 오버에 전환의 그러나 http://bost.ocks.org/mike/nations/

을 타임 라인. csv 파일에

일부 예제 데이터 :

time,name,xAxis,yAxis,radius,color 
1990,America,10,20.2,30,black 
1990,China,50,50,50,yellow 
2000,Singapore,20,30,20,red 
2010,China,60,50,50,yellow 
2020,America,20,30,40,black 
2020,Malaysia,60,5,10,orange 

나는 자바 스크립트와 D3에 새로 온 사람과 전환에 문제가 있어요. 각 이름 (미국, 중국, 싱가포르, 말레이시아)마다 서클을 고유하게 만들어 이름 당 하나의 서클 만 갖도록하겠습니다. 현재 새로운 서클은 각 타임 라인 버튼을 클릭 할 때 추가되지만 새 위치로 이동하거나 종료하지 않습니다.

데이터 읽기 사용 d3.csv :

이

d3.csv("data.csv", function(dataset) { 
    var years = []; 
    data=dataset; 

    //create a button for each year in the timeline 
    dataset.forEach(function(d){ 
     console.log(d.time); 

     //if not existing button for timeline 
     if($.inArray(d.time, years) == -1) 
     { 
      var button = document.createElement("button"); 
      button.setAttribute("type", "button"); 
      button.setAttribute("class", "btn btn-default"); 
      button.setAttribute('onclick', 'update("'+d.time+'")'); 
      var t = document.createTextNode(d.time); 
      button.appendChild(t); 
      $("#timeline").append(button); 
      years.push(d.time); 
     } 
    }) 

    //create circles for the first year 
    svg.selectAll("circles") 
     .data(dataset.filter(function(d) { return d.time == d3.min(years);}, function(d) { return d.name; })) 
     .enter() 
     .append("circle") 
     //.filter(function(d){ return d.time == d3.min(years); }) 
     .attr("cx", function (d) { return d.xAxis *10; }) 
     .attr("cy", function (d) { return d.yAxis; }) 
     .style("fill", function(d) { return d.color; }) 
     .transition() 
     .duration(800) 
     .attr("r", function(d) { return d.radius}); 
}); 

내 업데이트 기능 :

function update(year){ 
    var circle = svg.selectAll("circles") 
       .data(data.filter(function(d){return d.time == year;}), function(d) { return d.name; }); 

    //update 
    circle.attr("class", "update") 
     .filter(function(d){ return d.time == year; }) 
     .transition() 
     .duration(800) 
     .attr("cx", function (d) { return d.xAxis *10; }) 
     .attr("cy", function (d) { return d.yAxis; }) 
     .attr("r", function(d) { return d.radius}); 


    //enter 
    circle.enter().append("circle") 
      .filter(function(d){ return d.time == year; }) 
      .attr("cx", function (d) { return d.xAxis *10; }) 
      .attr("cy", function (d) { return d.yAxis; }) 
      .style("fill", function(d) { return d.color; }) 
      .attr("r", function(d) { return d.radius}); 

    //exit 
    circle.exit() 
     .remove(); 
} 

사람이 올바른 방향으로 날 포인트

? 감사.

Answer 1

svg.selectAll("circles")은 올바르지 않으므로 svg.selectAll("circle") (단락 기호 인 '원')이어야합니다.

현재로서는 "circles"이므로 빈 선택을 생성하므로 d3은 모든 데이터가 존재하지 않는 서클에 바인딩되어 있다고 가정하므로 .enter() 선택 항목은 항상 첫 번째에만 채워지기보다는 전체입니다 세우다).

다음으로, //update이라는 제목의 섹션에서는 필터링을 수행하지 않아도됩니다. 필터링 된 배열에 수행중인 .data() 바인딩이이를 처리해야합니다.

또한 섹션 //create circles for the first year은 필요하지 않으므로 부작용 버그를 제거하려면 제거해야합니다. update() 함수는 정상적으로 작동한다고 가정하고이를 처리해야합니다.