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

Question

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

在社区的帮助下，我设法得到了这样一个 chart done in d3 .然后我去尝试调整它并得到 this far .

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

有什么建议吗？

Answer 1

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

如果您对纯 d3 版本没问题，请查看此 fiddle这对 this 做了一些小改动直方图示例。

首先，我们给d3直方图函数的结果加上一个cumulative属性

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 比例

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 .

希望这对您有所帮助。