在D3JS中创建多个不同的路径元素

Question

让我们考虑一下这个简单的数据：

var data = [
    {
        "id": "A",
        "geometry": [ [0, 0], [10, 10], [10, 20], [0, 20] ]
    },
    {
        "id": "B",
        "geometry": [ [10, 10], [25, 10], [25, 30], [10, 20] ]
    },
];

我想为每个使用不同的区域显示“A”和“B”，因为这样做会让我对它们应用一个类（有用，因为我希望它们使用不同的背景颜色并单独作出反应点击和鼠标悬停。）

我能够使用d3.svg.area（）来绘制连续图，但它假定“输入数据是一个双元素数组”（不是我的情况）并且它似乎不支持绘制不同的区域。

它的模式是什么？

更新 为简单起见，我在样本数据中使用多边形。总的来说，目标是产生一个由几个区域组成的流而不是一个区域。最好说明如下图：

如果需要更多详细信息，我会更新帖子。

Answer 1

很难理解你想要绘制不同区域的确切含义。您的意思是想要最终得到2个path元素 - 一个用于id:"A"的对象几何，另一个用于id: "B"？如果是这样的话：

var pathGenerator = d3.svg.area()

var paths = d3.select("svg").selectAll("path").data(data);
paths.enter()
  .append("path")
  .attr("class", function(d) {
    if(d.id == "A") { return 'class-A'; }
    else if(d.id == "B") { return 'class-B'; }
  })
  .attr("d", function(d) {
    return pathGenerator(d.geometry);
  });