0

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

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

我尝试用条形图之类的东西来可视化这些值。但不是简单的条，我想使用一些用一个区域绘制的精美图形。

我现在只能通过更改数据来实现这一点。我在 for 循环中读入数据，并通过为每个数据点的区域点插入一个数组来创建更大的数据集。所以我有一个 3 维数组来提供给 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); } ))

这样的函数应该返回什么？这是处理类似事情的正确位置吗？

谢谢！马蒂亚斯

PS：示例图片： 在此处输入图像描述

4

1 回答 1

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)) + ")";
});
于 2013-06-24T17:32:53.077 回答