Question

我正在寻找构建直方图的选项，在我尝试在准系统d3中做之前，我发现nvd3的linePlusBarChart是可取的，尽管给定的example并非设计用于直方图累积百分比线。

在社区帮助下，我设法获得了chart done in d3。然后我尝试调整它并得到this far。

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

有什么建议吗？

Answer 1

我不确定是否需要使用nvd3（外观/感觉），但听起来你正试图复制d3直方图示例“......让它更像是基本的d3版本吗？ ”

如果您对纯d3版本没问题，请查看fiddle对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调整为具有累积百分比线的直方图？

1 个答案: