d3.js可以使用来自同一来源的数据在同一张图上绘制两个散点图吗

Can d3.js draw two scatterplots on the same graph using data from the same source?

本文关键字：一张 绘制 两个 散点图 可以使 js d3 数据      更新时间：2024-03-15

我发现的所有d3教程都使用排列在对象数组中的数据，从中为数组中的每个对象绘制一个点。给定以下结构中的数据：

data = [
     {id: 1, x: 4, y: 10, type: 1},
     {id: 2, x: 5, y: 20, type: 2}
     ...
]

x和y值用于制作散点图。type参数用于更改每个点的颜色。请参阅以下jsfiddle示例：http://jsfiddle.net/uxbHv/

不幸的是，我有一个不同的数据结构，我不知道如何通过为每个对象绘制两个数据点来创建同一个图。以下是一些示例数据：

dataSet = [
     {xVar: 5, yVar1: 90, yVar2: 22},
     {xVar: 25, yVar1: 30, yVar2: 25},
     {xVar: 45, yVar1: 50, yVar2: 80},
     {xVar: 65, yVar1: 55, yVar2: 9},
     {xVar: 85, yVar1: 25, yVar2: 95}
]

我可以将xVar分别与yVar1或yVar2进行绘图，但我不知道如何将两者都放在同一张图上：http://jsfiddle.net/634QG/

使用数据联接时的一般规则是，您需要从数据到元素的一对一映射。因此，如果散点图中有两个系列，则需要两个容器元素（如G元素）来表示该系列。由于当前只有一个data数组，因此还需要使用array.map将数据表示转换为具有相同表示的两个并行数组。这样，您就不必为每个系列重复代码。

假设您的数据在CSV文件中表示，每个系列的x-值有一列，y值有多列：

x,y1,y2
5,90,22
25,30,25
45,50,80
65,55,9
85,25,95

如果希望代码完全通用，则首先需要计算系列的名称，例如["y1", "y2"]。（如果您在CSV文件中添加了第三列，它可能是["y1", "y2", "y3"]。）您可以使用d3.keys来计算名称，它从对象中提取命名属性。例如，d3.keys({foo: 1, bar: 2})返回["foo", "bar"]。

// Compute the series names ("y1", "y2", etc.) from the loaded CSV.
var seriesNames = d3.keys(data[0])
    .filter(function(d) { return d !== "x"; })
    .sort();

现在您有了系列名称，就可以创建一个点阵列阵列。外部数组表示序列（有两个），内部数组存储数据点。可以同时将点转换为一致的表示形式（具有x和y特性的对象），从而允许跨系列重用代码。

// Map the data to an array of arrays of {x, y} tuples.
var series = seriesNames.map(function(series) {
  return data.map(function(d) {
    return {x: +d.x, y: +d[series]};
  });
});

请注意，此代码使用+运算符将CSV值强制转换为数字。（CSV文件是非类型的，所以它们最初是字符串。）

现在，您已经将数据映射到常规格式，可以为每个系列创建G元素，然后为每个点在其中圈出元素。生成的SVG结构如下所示：

<g class="series">
  <circle class="point" r="4.5" cx="1" cy="2"/>
  <circle class="point" r="4.5" cx="3" cy="2"/>
  …
</g>
<g class="series">
  <circle class="point" r="4.5" cx="5" cy="4"/>
  <circle class="point" r="4.5" cx="7" cy="6"/>
  …
</g>

以及相应的D3代码：

// Add the points!
svg.selectAll(".series")
    .data(series)
  .enter().append("g")
    .attr("class", "series")
    .style("fill", function(d, i) { return z(i); })
  .selectAll(".point")
    .data(function(d) { return d; })
  .enter().append("circle")
    .attr("class", "point")
    .attr("r", 4.5)
    .attr("cx", function(d) { return x(d.x); })
    .attr("cy", function(d) { return y(d.y); });

我还添加了一些代码，通过向包含的G元素添加填充样式，为每个系列分配唯一的颜色。当然，有很多不同的方法可以做到这一点。（例如，你可能想更具体地了解每个系列的颜色。）我还省略了计算x和y比例域（以及渲染轴）的代码，但如果你想看到整个工作示例：

  • http://bl.ocks.org/3183403

将每个数据点的两个圆放在一个svg:g元素中。这将为数据到元素生成一对一的映射，但仍然允许您显示两个不同的点。

var nodeEnter = vis1.selectAll("circle")
      .data(dataSet)
      .enter()
      .insert("svg:g");
nodeEnter.insert("svg:circle")
           .attr("cx", function (d) { return 100 - d.xVar})
           .attr("cy", function (d) { return 100 - d.yVar1})
           .attr("r", 2)
           .style("fill", "green");
nodeEnter.insert("svg:circle")
           .attr("cx", function (d) { return 100 - d.xVar})
           .attr("cy", function (d) { return 100 - d.yVar2})
           .attr("r", 2)
           .style("fill", "blue");

工作JSFiddle。

相关文章：