Sử dụng phương pháp chuyển tiếp D3 với dữ liệu cho ô phân tán

Question

Vì vậy, tôi mới sử dụng D3 và có ít điểm kinh nghiệm với JavaScript nói chung. Vì vậy, tôi đã làm theo một số hướng dẫn hiện đang sử dụng mã nguồn tạo ra một âm mưu phân tán cơ bản. Bây giờ câu hỏi của tôi là làm cách nào để sử dụng phương thức transition() để di chuyển vòng tròn xung quanh khi tôi thêm nhiều tập dữ liệu hơn? Tôi muốn có thể thiết lập các nút và khi người dùng nhấn chúng, nó sẽ kích hoạt phương thức transition() với tập dữ liệu tương ứng. Các hướng dẫn, tôi đọc trên hiệu ứng chuyển tiếp chỉ rút một sự chuyển tiếp trên một hình chữ nhật đơn và đã làm nó bằng tay, không có dữ liệu, chứ không phải với nhiều mục

//Width and height 
var w = 900; 
var h = 600; 
var padding = 30; 


//Static dataset 
var dataset = [ 
    [50, 30], [300, 75], [123, 98], [70, 40], [247, 556], 
    [410, 12], [475, 44], [25, 67], [85, 21], [220, 88], 
    [600, 150] 
];   

//Create scale functions 
var xScale = d3.scale.linear() 
    .domain([0, d3.max(dataset, function(d) { return d[0]; })]) 
    .range([padding, w - padding * 2]); 

var yScale = d3.scale.linear() 
    .domain([0, d3.max(dataset, function(d) { return d[1]; })]) 
    .range([h - padding, padding]); 

var rScale = d3.scale.linear() 
    .domain([0, d3.max(dataset, function(d) { return d[1]; })]) 
    .range([4, 4]); 

//Define X axis 
var xAxis = d3.svg.axis() 
    .scale(xScale) 
    .orient("bottom") 
    .ticks(5); 

//Define Y axis 
var yAxis = d3.svg.axis() 
    .scale(yScale) 
    .orient("left") 
    .ticks(5); 

//Create SVG element 
var svg = d3.select("body") 
    .append("svg") 
    .attr("width", w) 
    .attr("height", h); 


//Create circles 
svg.selectAll("circle") 
    .data(dataset) 
    .enter() 
    .append("circle") 
    .attr("cx", function(d) { 
     return xScale(d[0]); 
    }) 
    .attr("cy", function(d) { 
     return yScale(d[1]); 
    }) 
    .attr("r", function(d) { 
     return rScale(d[1]); 
    }) 
    .attr("fill", "blue"); 

//Create X axis 
svg.append("g") 
    .attr("class", "axis") 
    .attr("transform", "translate(0," + (h - padding) + ")") 
    .call(xAxis); 

//Create Y axis 
svg.append("g") 
    .attr("class", "axis") 
    .attr("transform", "translate(" + padding + ",0)") 
    .call(yAxis); 

Answer 1

Đầu tiên, trước khi giải quyết các vấn đề chuyển tiếp, bạn cần phải cấu trúc lại mọi thứ một chút. Bạn sẽ muốn gọi hàm update(newData) mỗi khi dữ liệu của bạn thay đổi và có chức năng này thực hiện tất cả các cập nhật cần thiết.

This tutorial bởi mbostock mô tả chính xác "mẫu cập nhật chung" bạn cần.

Các bộ phận II và III sau đó tiếp tục giải thích cách chuyển đổi sang mẫu này.

Chúng rất ngắn. Và một khi bạn hiểu chúng, bạn sẽ có tất cả thông tin bạn cần để làm điều này.

Answer 2

Tôi đoán bạn chỉ cần xác định .transition() chức năng sau .data(newData) chức năng

Trong ví dụ Y2 Sau đây là một nút trong một tệp JSON, nơi Y1 là người trước đây sử dụng

Ví dụ:

//Creating the button 
var button = d3.select("body") 
.append("input") 
.attr("type","button") 
.attr("value", "A button"); 

//Transitioning process 
button.on("click", function() 
{ circles 
    .data(data.Y2) 
    .transition() 
    .attr("cx", function(d) 
    { 
     return d[0]; 
    } 
    ) 
    .attr("cy", 300); 
} 
)