d3.js - 对散点图数据使用 D3 转换方法

Question

所以我是 D3 的新手，一般来说对 JavaScript 的经验很少。所以我一直在关注一些教程，目前正在使用创建基本散点图的源代码。现在我的问题是，当我添加更多数据集时，如何使用 transition() 方法来移动圆圈？我希望能够设置按钮，当用户按下它们时，它会使用相应的数据集激活 transition() 方法。我读到的关于过渡的教程只显示了一个矩形上的过渡，并且是手动完成的，没有数据，也没有多个项目

//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

首先，在解决转换问题之前，您需要稍微重构一下。您将要调用 update(newData)每次数据更改时都使用函数，并让此函数执行所有必要的更新。

This tutorial by mbostock 准确描述了您需要的“一般更新模式”。

配件 II和 III然后继续解释如何转换到这种模式。

他们很短。一旦您理解了它们，您将拥有执行此操作所需的几乎所有信息。