使 nvd3 linePlusBarChart 适应具有累积百分比线的直方图？

Question

我一直在寻找构建直方图的选项，在我尝试在准系统 d3 中这样做之前，我发现 nvd3 的 linePlusBarChart 是可取的，尽管给定的 example 不是为具有累积百分比线的直方图设计的.

在社区的帮助下，我设法得到了这样一个chart done in d3. I then went to try to adapt it and got this far。

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

有什么建议吗？

Answer 1

我不确定您是否需要使用 nvd3 (look/feel)，但听起来您正在尝试复制 d3 直方图示例“...让它更像基本的 d3 版本？”。

如果您对纯 d3 版本没问题，请查看此 fiddle which make small changes to this 直方图示例。

首先我们对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]);

然后，声明一个线函数来使用我们的新 cum 属性和 yc scale

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 文件应该可以解决它们。看到这个 fiddle。

希望对您有所帮助。

使 nvd3 linePlusBarChart 适应具有累积百分比线的直方图？

Adapting nvd3 linePlusBarChart to a histogram with cumulative percentage line?

javascript

d3.js

nvd3.js