将 nvd3 线加条形图调整为带有累积百分比线的直方图

Adapting nvd3 linePlusBarChart to a histogram with cumulative percentage line?

本文关键字：百分比 直方图 nvd3 条形图 调整      更新时间：2023-09-26

我一直在寻找构建直方图的选项，在我尝试在准系统d3中执行此操作之前，我发现nvd3的linePlusBarChart是可取的，尽管给定的示例不是为具有累积百分比线的直方图设计的。

在社区的帮助下，我设法在 d3 中完成了这样的图表。然后我去尝试改编它，并走到了这一步。

似乎出于某种原因，我得到了 2 个图表，底部有一个迷你预览，顶部是较大的图表，并且线条有圆形点，在大图表上太大了。如何让它只是一个图表，没有线上的点（或至少是非常小的点），并使其更像基本的 d3 版本？

有什么建议吗？

我不确定使用 nvd3（外观/感觉）是否是您的要求，但听起来您正在尝试复制 d3 直方图示例"......让它更像基本的 D3 版本？

如果您对纯 d3 版本感到满意，请查看此小提琴，它对直方图示例进行了小更改。

首先，我们在 d3 直方图函数的结果中添加一个累积属性

data.forEach(function(d,i){
    if(i === 0){
    d.cum = d.y
  }else{
    d.cum = d.y + data[i-1].cum
  }
})

接下来，我们为累积线创建一个 y 刻度

var yc = d3.scale.linear()
.domain([0, d3.max(data, function(d) { return d.cum; })])
.range([height, 0]);

然后，声明一个行函数以利用我们新的暨属性和 yc 刻度

var line = d3.svg.line()
.x(function(d) { return x(d.x); })
.y(function(d) { return yc(d.cum); });

最后画出累积线

svg.append("path")
  .datum(data)
  .attr("class", "line")
  .attr("d", line);

关于您发布的 nvd3 示例，您可以将图表的"focusEnable"设置为 false 以摆脱底部图表。 

var chart = nv.models.linePlusBarChart()
        .margin({top: m.top, right: m.right, bottom: m.bottom, left: m.left})
        .x(function(d,i) { return i })
        .y(function(d,i) {return d[1] })
        .focusEnable(false)
        ;

其他问题（大点和线条周围的阴影区域）与 css 相关。添加 nvd3 的 css 文件应该可以解决这些问题。看到这个小提琴。

希望这有帮助。

相关文章：