使用D3转换方法与散点图的数据 [英] Using D3 transition method with data for scatter plot

问题描述

所以我是新的D3和一般的JavaScript有一点exp。所以我一直在使用一些教程，目前使用源代码创建一个基本的散点图。现在我的问题是，当我添加更多的数据集时，如何使用transition（）方法来移动圆？我想要能够设置按钮，当用户按下它们，它激活transition（）方法与相应的数据集。我在阅读过渡的教程只显示在一个矩形上的过渡，并且手动，没有数据，没有多个项目。

So I'm new to D3 and have little exp with JavaScript in general. So I have been following some tutorials am currently using source code that creates a basic scatter plot. Now my question is how do I use the transition() method to moves the circles around when I add more datasets? I want to be able to set up buttons and when a user presses them, it activates the transition() method with the corresponding dataset. The tutorial I read on transitions only showed a transition on a single rectangle and did it manually, without data, and not with multiple items

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

推荐答案

首先，在解决转换问题之前，重构事情有点。每次你的数据改变时，你将要调用 update（newData）函数，并且有这个函数做所有必要的更新。

First, before addressing the transition issue, you need to refactor things a bit. You're going to want to call an update(newData) function every time your data changes, and have this function do all the necessary updates.

mbostock的本教程完全描述了一般更新模式需要。

This tutorial by mbostock describes exactly the "general update pattern" you'll need.

部件 II 和 III ，然后继续解释如何将转换工作转换成此模式。

Parts II and III then go on to explaining how to work transitions into this pattern.

它们非常短。一旦你了解它们，你就会得到你需要的所有信息。

They're very short. And once you understand them, you'll have just about all the info you need to do this.

这篇关于使用D3转换方法与散点图的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！