Dc.js 箱线图未创建轮廓

Question

为什么 dc.js boxplot 没有创建任何轮廓？我刚刚创建了一个基于 http://dc-js.github.io/dc.js/examples/boxplot-basic.html

的简化代码

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<body>

    <div id = 'boxch1'><br></div>

    <script src="https://unpkg.com/crossfilter2@1.4.7/crossfilter.min.js"></script>
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <script src="http://unpkg.com/dc@3/dc.js"></script>

    <script>
    let exp = [
         {"Expt":1, "Speed":8},
         {"Expt":1, "Speed":7},
         {"Expt":1, "Speed":9},
         {"Expt":1, "Speed":1},
         {"Expt":2, "Speed":8},
         {"Expt":2, "Speed":6},
         {"Expt":2, "Speed":8}];


          dc.config.defaultColors(d3.schemeSet1);
          var ndx = crossfilter(exp)
          runDimension = ndx.dimension(function(d) {return +d.Run;});
          runGroup = runDimension.group();
          experimentDimension = ndx.dimension(function(d) {return "exp-" + d.Expt;});

          speedArrayGroup = experimentDimension.group().reduce(
        function(p,v) {
          // keep array sorted for efficiency
          p.splice(d3.bisectLeft(p, v.Speed), 0, v.Speed);
          return p;
        },
        function(p,v) {
          p.splice(d3.bisectLeft(p, v.Speed), 1);
          return p;
        },
        function() {
          return [];
        }
          );

     var bp01 = dc.boxPlot("#boxch1");
        bp01
            .width(768)
            .height(480)
            .margins({top: 10, right: 50, bottom: 30, left: 50})
            .dimension(experimentDimension)
            .group(speedArrayGroup)
            .elasticY(true)
            .elasticX(true);
    bp01.render()

    </script>


</body>
</html>

我没有得到如下图所示的方框轮廓。

https://imgur.com/a/ELH5xlX

Answer 1

感谢您提供完整的示例。

出现这些问题一般是因为你缺少dc.css.

在dc.js和一般的D3代码中，任何不受数据控制的SVG元素的静态属性都可以在JS代码或CSS中指定。这包括轴线、轮廓、字体等

通常，使用类名和将静态属性留给 CSS 会使自定义更容易。但是您确实需要包含 dc.css.

Dc.js 箱线图未创建轮廓

Dc.js Boxplot not creating outlines

dc.js