1

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

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() 来绘制一个连续图，但是它假设“输入数据是一个二元素数字数组”（不是我的情况）并且它似乎不支持绘制不同的领域。

它的模式是什么？

更新 为了简单起见，我在示例数据中使用了多边形。然而，总体而言，目标是生成一个由多个区域组成的流，而不仅仅是一个区域。最好用下图说明： 我想要达到的目标

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

4

1 回答 1

0

很难理解想要绘制不同区域的确切含义。你的意思是你想最终得到 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);
  });
于 2013-11-06T15:01:33.947 回答