NVD3.js分散

Question

您好我正在尝试使用nvd3.js库创建一个scatterChart。现在的问题是我希望两个轴的宽度/高度相同。但即使代码中的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> 

希望有人可以帮助我

Answer 1

从您可能发现的源代码中，使用D3的domain（）API将forceX和forceY设置为图表。所以我猜这个nvd3 API不会真正“强制”，因为实际长度将由d3计算，并且由输入范围决定。

也许您需要自己计算域名，以便maxY和maxX准确定位在轴的边缘。