Nvd3 官方图表巨大 Css

Question

我在使用几个 Nvd3 图表时遇到了意想不到的问题。我没有使用 nvd3 css 文件 (nv.d3.min.css) 对它们进行编码。没有它一切都很好，但是当我突然添加它时，第二张图表占用了很多 space (1500x1500)。正常尺寸是 450x450，但现在是

如果我查看 chrome 的控制台并取消选中样式属性 "width: 100%;" 和 "height: 100%;" 它会起作用（实际上只有一个）。另一个改变 css 属性的是 "user agent stylesheet".

我不明白为什么，因为我认为在配置图表时尺寸是明确编码的

HTML

<div id="charts">
<div id="piechart" ><svg></svg></div>
<div id="chart"><svg></svg></div>
</div>

NVD3

    function setupGraph(data_graph) {
        nv.addGraph(function() {
            var pieChart = nv.models.pieChart();
            pieChart.margin({top: 30, right: 60, bottom: 20, left: 60});
            var datum = data_graph[0].values;

        pieChart.tooltipContent(function(key, y, e, graph) {
                var x = String(key);
                  var y =  String(y);

                  tooltip_str = '<center><b>'+x+'</b></center>' + y;
                  return tooltip_str;
                  });

        pieChart.showLabels(true);
        pieChart.donut(false);

        pieChart.showLegend(true);

            pieChart
                .x(function(d) { return d.label })
                .y(function(d) { return d.value });

            pieChart.width(450);
            pieChart.height(450);

                d3.select('#piechart svg')
                .datum(datum)
                .transition().duration(350)
                .attr('width',450)
                .attr('height',450)
                .call(pieChart);

        nv.utils.windowResize(chart.update);
        return chart;
            });

    }

    function setupGraph2(data_graph) {
        nv.addGraph(function() {
        var chart = nv.models.discreteBarChart()
          .x(function(d) { return d.label })    //Specify the data accessors.
          .y(function(d) { return d.value })
          //.valueFormat(d3.format(',.2f'))
          .staggerLabels(true)    //Too many bars and not enough room? Try staggering labels.
          .tooltips(false)        //Don't show tooltips
          .showValues(true)       //...instead, show the bar value right on top of each bar.
          .transitionDuration(350)
          ;

            chart.width(450);
            chart.height(450);


        d3.select('#chart svg')
                .datum(data_graph)
                .attr('width',450)
                .attr('height', 450)
                .call(chart);

          nv.utils.windowResize(chart.update);
        return chart;
           });

有人能看到发生了什么吗？

Answer 1

只需覆盖 nvd3.css 样式表的默认宽度和高度属性，在您的样式表中创建规则，并确保它在 after 后加载 nvd3 样式表。

最后一条规则（具有相同的specificity）获胜：

svg {
     width : auto;
    height : auto;
}

或创建更具体的规则以仅对您的 svg 起作用，例如：

#charts svg {
     width : 450px;
    height : 450px;
}

Nvd3 官方图表巨大 Css

Nvd3 chart huge with oficial Css

html

css

nvd3.js