Jquery ui 两个条形图位于同一位置，由一个滑块D3.js控制

我试图创建一个条形图，当移动独立滑块时，它们会同时更改两个条形图svg高度，并且它们是堆叠的，它们是不同的颜色显示它在同一个图形中显示两个单独的值，基本上显示增长与当前值。我正在使用jQueryUI和D3.js。目前它只移动一个svg元素，而不是同时移动两个，我希望它们同时移动

HTML

**

这就是我困惑的地方

**

---

对于初学者，您可能希望遵循本教程：

您想知道的“return 40；”实际上是什么将指定要附加到svg的rect的位置和尺寸。这些不应该仅仅是40，它们应该绑定到数据集中的值，或者基于系列集合中条形图系列的索引或比40更有意义的内容

有一个堆叠条形图数据处理器，它将获取一组序列，并输出一组新的序列坐标定义，从而更容易计算rect在svg坐标空间中的堆叠方式：

然后，还有一个更普遍的问题，即如何处理这些“嵌套”数据集，其中有序列，序列中有值，您不想手动跟踪和选择单个序列。有几种方法可以处理这种情况。如果您知道您将只拥有两个系列，并且您确实希望对每个系列进行独立的细粒度控制，那么您可以为顶级对象分配一个id，然后通过按id选择顶级对象来启动每个绘图的数据联接。。。例如：

var container1 = d3.select("#myContainer1);
container1.selectAll("rect").data(myData1).append("rect");

var container2 = d3.select("#myContainer2);
container2.selectAll("rect").data(myData2).append("rect");

如果这样做，第一次选择基本上会设置后续选择的上下文。因此，只有“#myContainer1”或“#myContainer2”中的矩形会根据您所处的上下文被每个“selectAll”选中

另一种方法是使用嵌套选择。嵌套选择稍微复杂一些，但90%的情况下，这是我使用的方法。使用嵌套选择，可以稍微重新构造数据，然后应用嵌套选择/联接将每个系列绑定到dom元素，然后将每个系列的值绑定到每个系列dom元素的子元素

首先，阅读以下内容：

然后尝试使您的数据更像这样：

data = [
    { key: "series1", values: [...]},
    { key: "series2", values: [...]}
];

然后，您将需要进行嵌套选择，从选择“数据”数组开始，并将其绑定到封装两个系列的svg或html元素

var series = d3.select("svg").selectAll("g.series")
    .data(data, function(d){return d.key; });

series.enter().append("g").attr("class", "series");

此时，d3将为每个序列向svg元素添加一个“g”元素，并将序列对象（包括键和值数组）绑定到附加的元素。接下来，您可以进行嵌套选择，将特定于系列的元素添加到g元素。。。即：

var rect = series.selectAll("rect").data(function(d) { return d.values });
rect.enter().append("rect");

请注意，我们在“.data（…）”调用中使用了一个函数。这是因为我们想要传递给连接的值实际上取决于D3正在处理的特定序列

现在，对于每个系列中的每个值，您将在g元素中添加一个rect。由于您使用d3进行数据绑定，并且在第一次选择（“.data（data，function（d）{return d.key；}”）中使用了key函数，因此以相同的嵌套/键控方式进行的未来选择将更新右侧的g和rect元素

这里有一把小提琴，展示了这一概念：

---

关键的一点是，您可以更新数据（包括添加额外的系列），整个过程将根据新的嵌套联接正确地重新绘制。

感谢您的详细和及时的响应。这篇文章非常有用。我需要一段时间来处理此信息。谢谢您的时间。

data = [
    { key: "series1", values: [...]},
    { key: "series2", values: [...]}
];

var series = d3.select("svg").selectAll("g.series")
    .data(data, function(d){return d.key; });

series.enter().append("g").attr("class", "series");

var rect = series.selectAll("rect").data(function(d) { return d.values });
rect.enter().append("rect");