在D3JS中创建多个不同的路径元素 [英] Creating multiple distinct path elements in D3JS

问题描述

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

Let us consider this simple data:

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这样做会让我对他们应用一个类（非常有用，因为我希望他们使用不同的背景颜色，并单独对点击和鼠标悬停做出反应。）

I'd like to display "A" and "B" using a distinct area for each, as doing so will let me apply a class to them (useful because I want them to use different background colors and to react separately to clicks and mouse hovers.)

能够使用d3.svg.area（）来绘制一个连续的图，然而它假设输入数据是一个两元素的数字数组（不是我的情况），它似乎不支持绘图的不同区域。

I'm able to use d3.svg.area() to draw a continuous graph however it assumes that "the input data is a two-element array of numbers" (not my case) and it does not seem to support the drawing of distinct areas.

它的模式是什么？

UPDATE
为了简单起见，我在示例数据中使用多边形。总的来说，目标是产生由几个区域组成的流，而不是仅仅一个。最好用下面的图片说明：

UPDATE I'm using polygons in the sample data for simplicity. Overall, the goal however is to produce a stream that be composed of several areas instead of just a single one. Best illustrated with the picture below:

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

I'll update the post if more details are needed.

推荐答案

很难理解你的意思是想绘制不同的区域。你的意思是你想要结束2 path 元素 - 一个用于对象的几何体 id：A，另一个用于 id：B？如果是：

Hard to understand what exactly you mean by wanting to draw distinct areas. Do you mean that you want to end up with 2 path elements –– one for the geometry of the object with id:"A" and the other for id: "B"? If so:

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);
  });

这篇关于在D3JS中创建多个不同的路径元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！