NVD3.js scatter

NVD3.js scatter

本文关键字：scatter js NVD3      更新时间：2024-07-02

你好，我正在尝试用nvd3.js库制作一个散点图。现在的问题是，我希望两个轴都有相同的宽度/高度。但是，即使css中的高度和宽度都设置为相同的高度，y轴的高度也会更长。

JS:

var chart = nv.models.scatterChart()
                            .width(300)
                            .height(300)
                            .showXAxis(true)
                            .showYAxis(true)
                            .forceX([-100,100])
                            .forceY([-100,100])
                            .tooltips(true)
                            .showLegend(false)
                            .tooltipContent(function(){
                                return 'clock';
                            });

css：

#main-chart {
  width: 300px;
  height: 300px;
  margin: 0 auto;
}

html:

 <div class="container" ng-controller="film_factor_controller">
  <svg bubble-chart id="main-chart"></svg>

希望有人能帮我摆脱

从源代码中，您可能会发现，forceX和forceY是通过D3的domain（）API设置到图表中的。所以我猜这里的nvd3 API不会真的"强制"，因为实际长度将由d3计算，这是由输入范围决定的。

也许你需要自己计算域，这样maxY和maxX就正好位于轴的边缘。

相关文章：