如何使用d3.js对数据进行充气，以显示每个数据点的区域

Question

我有一个非常简单的数据集。只有三个值（随着时间的推移会变得更多）看起来像这样：

{a = 10，b = 20，c = 30}

我尝试使用这样的条形图来显示这些值。但是，我想使用一些区域绘制的花哨图形，而不是简单的条形图。

我只是通过更改数据来实现此目的。我在for循环中读取数据，并通过为每个数据点的区域点插入数组来创建更大的数据集。所以我有一个三维数组来提供vis，它工作得很好。

但是我改变数据而不是可视化似乎是错误的。

这是我目前创建区域的代码：

var g = svg.selectAll("path.area")
    .data(displayData)      // dimension of data should be 3D
    .enter()
    .append("g")
    .attr("class", "graph");

pathes = g.append("path")
    .attr("class", "area") // not the cause of your problem
    .attr("d", d3.svg.line().interpolate("linear-closed"))
    .style("stroke", function(d) { return color(d.name); })
    .style("stroke-width", 2);

有没有办法在这个代码的某个地方放入一个函数，以便以干净的方式将每个数据点“膨胀”成一个完整的区域？ 类似的东西：

.attr("d", d3.svg.line( function(d){ return inflateMyDataPoint(d); } ))

这样的功能应该返回什么？对于这样的事情，这是正确的位置吗？

谢谢！ 的Matthias

PS：示例图片：

Answer 1

您始终可以创建自定义线路生成器。对于你所展示的形状，它可能看起来像这样：

var w = 10; // width
function generator(y) {
  var ys = scale(y);
  return "M 0 " + ys + " L 0 " + (0.1*ys) + " " + (w/2) +
         " 0 " + w + " " + (0.1*ys) + " 0 " + ys + "Z";
}

然后您可以执行类似

的操作

g.append("path")
 .attr("d", generator)
 .attr("transform", function(d, i) {
   return "translate(" + (i*w) + "," + (height - scale(d)) + ")";
});