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

从源代码中你可以发现，forceX和forceY都是通过D3的domain()接口设置为图表的。所以我猜这里的nvd3接口不会真正‘强制’，因为实际长度将由d3计算，这是由输入范围决定的。

也许你需要自己计算域名，这样maxY和maxX就可以精确地定位在你的坐标轴的边缘。