使用D3.js的简单气泡图

在我的工作场所，我被分配了可视化一些数据的任务。 那时我碰到了D3.js ，这是一个JavaScript库，用于以交互方式基于数据处理文档。 它使用HTML5，JavaScript，SVG和CSS3。 在本教程中，我们将使用D3以气泡图的形式可视化我们的数据。

在开始之前，请下载D3源。

创建X和Y轴

首先使用D3绘制一些轴。 首先，我们在HTML页面中需要SVG。 SVG是基于XML的矢量图像格式，为交互和动画提供支持。 以下代码示例显示了HTML页面的外观。 请注意对D3的引用和主体中的svg标签。

D3.js有一组API ，我们将使用它们来绘制轴。 我们将使用的API之一是d3.scale.linear() ，用于创建定量标度。 使用此API，我们可以定义每个轴的范围和域。 域定义了图表上显示的最小值和最大值，而范围是我们将覆盖的SVG的数量。 我们的svg是500×500，因此，我们将范围定义为40×400。

var xRange = d3.scale.linear().range([40, 400]).domain([0,100]);
var yRange = d3.scale.linear().range([40, 400]).domain([0,100]);

接下来，我们需要缩放到两个轴。 为此，我们将使用axis.scale() ：

var xAxis = d3.svg.axis().scale(xRange);
var yAxis = d3.svg.axis().scale(yRange);

接下来，通过JavaScript将x和y轴附加到SVG元素：

vis.append("svg:g").call(xAxis);
vis.append("svg:g").call(yAxis);

此时，我们的InitChart()函数如下所示：

function InitChart() {
  var vis = d3.select("#svgVisualize");
  var xRange = d3.scale.linear().range([40, 400]).domain([0,100]);
  var yRange = d3.scale.linear().range([40, 400]).domain([0,100]);
  var xAxis = d3.svg.axis().scale(xRange);
  var yAxis = d3.svg.axis().scale(yRange);
  vis.append("svg:g").call(xAxis);
  vis.append("svg:g").call(yAxis);
}

到目前为止，您可以查看代码的演示 。 您应该看到一个粗黑线。 实际上，有两条线相互重叠。 要分离轴，请修改我们在y轴上附加的代码，如下所示：

vis.append("svg:g").call(yAxis).attr("transform", "translate(0,40)");

更新的代码可在此处获得 。 现在，您可以看到两个轴，因为我们已将y轴移动了40个单位。

接下来，我们需要做两件事：1.）将y轴从x轴移40个单位，从y轴移0个单位，并且2.）将其方向更改为向左。 更新的InitChart()如下所示，更新的演示可在此处获得 。

function InitChart() {
  var vis = d3.select("#svgVisualize");
  var xRange = d3.scale.linear().range([40, 400]).domain([0,100]);
  var yRange = d3.scale.linear().range([40, 400]).domain([0,100]);
  var xAxis = d3.svg.axis().scale(xRange);
  var yAxis = d3.svg.axis().scale(yRange).orient("left");
  vis.append("svg:g").call(xAxis);
  vis.append("svg:g").call(yAxis).attr("transform", "translate(40,0)");
}

现在，我们的y轴看起来不错，但是x轴需要向下移动。 让我们使用transform降低它：

vis.append("svg:g").call(xAxis).attr("transform", "translate(0,400)");

现在，如果我们看一下图表，我们会看到y轴比例从100变为0。我们需要像这样反转它：

var yRange = d3.scale.linear().range([400, 40]).domain([0,100]);

修改后的InitChart()函数如下所示：

function InitChart() {
  var vis = d3.select("#svgVisualize");
  var xRange = d3.scale.linear().range([40, 400]).domain([0,100]);
  var yRange = d3.scale.linear().range([400, 40]).domain([0,100]);
  var xAxis = d3.svg.axis().scale(xRange);
  var yAxis = d3.svg.axis().scale(yRange).orient("left");
  vis.append("svg:g").call(xAxis).attr("transform", "translate(0,400)");
  vis.append("svg:g").call(yAxis).attr("transform", "translate(40,0)");
}

这是更新的演示。

气泡图

现在已经设置了轴，是时候创建气泡图了。 我们首先需要的是一些数据：

var sampleData = [{
  "x": 1,
  "y": 5
}, {
  "x": 20,
  "y": 20
}, {
  "x": 40,
  "y": 10
}, {
  "x": 60,
  "y": 40
}, {
  "x": 80,
  "y": 5
}, {
  "x": 100,
  "y": 60
}];

之前，我们对每个轴的域（从0到100）进行了硬编码。现在我们有了数据，就可以动态设置域。 D3具有min()和max()函数，使我们的生活更轻松。 只需修改xRange和yRange变量，如下所示。

var xRange = d3.scale.linear()
                .range([40, 400])
                .domain([d3.min(sampleData, function(d) {
                  return (d.x);
                }), d3.max(sampleData, function(d) {
                  return d.x;
                })]);
var yRange = d3.scale.linear()
                .range([400, 40])
                .domain([d3.min(sampleData, function(d) {
                  return d.y;
                }), d3.max(sampleData, function(d) {
                  return d.y;
                })]);

创建圈子

现在，我们需要根据sampleData的x和y值绘制圆。 首先，我们需要将sampleData绑定到圈子：

var circles = vis.selectAll("circle").data(sampleData);

circles.enter();

上面的代码从文档中选择circle并返回一个占位符。 现在，我们需要将xRange和yRange应用于坐标以将它们转换为绘图空间：

var circles = vis.selectAll("circle").data(sampleData);

circles
    .enter()
    .insert("circle")
    .attr("cx", function(d) { return xRange (d.x); })
    .attr("cy", function(d) { return yRange (d.y); })
    .attr("r", 10)
    .style("fill", "red");

结论

D3.js是一个很棒的数据可视化库。 在本教程中，我们专注于创建气泡图。 我们的图表相当简单，但是可以通过使用过渡使可视化变得更具交互性，我们将在以后的教程中进行讨论和实现。 此处提供了本文成品的演示。

From: https://www.sitepoint.com/simple-bubble-charts-using-d3-js/