如何通过css在dc.js中设置饼图的宽度答案

【问题标题】：how to set width of piechart in dc.js through css如何通过css在dc.js中设置饼图的宽度
【发布时间】：2016-03-03 18:36:01
【问题描述】：

我想为不同的分辨率设置不同的dc.js饼图宽度；为此，我想通过 css 设置饼图的宽度，以便我可以为不同的分辨率应用媒体查询。请为我提供通过css设置dc.js饼图宽度的解决方案。

icd9Pie /* dc.pieChart('#gain-loss-chart', 'chartGroup') */
        // (_optional_) define chart width, `default = 200`

          .width(180) // (optional) define chart height, `default = 200`
          .height(160)

        // Define pie radius
        .radius(80)
        // Set dimension
        .dimension(icd9Dimension)
        // Set group
        .group(icd9Group)
        // (_optional_) by default pie chart will use `group.key` as

        // its label but you can overwrite it with a closure.
        .label(function(d) {
            return d.key;
        }).renderLabel(true)
        /

//新代码

 icd9Pie /* dc.pieChart('#gain-loss-chart', 'chartGroup') */
        // (_optional_) define chart width, `default = 200`

          .minWidth(180) // (optional) define chart height, `default = 200`
          .minHeight(160)

        // Define pie radius
        .radius(80)
        // Set dimension
        .dimension(icd9Dimension)
        // Set group
        .group(icd9Group)
        // (_optional_) by default pie chart will use `group.key` as

        // its label but you can overwrite it with a closure.
        .label(function(d) {
            return d.key;
        }).renderLabel(true)
        /

【问题讨论】：

这与stackoverflow.com/questions/33950076/… 有何不同 - 那个解决方案在这里不起作用怎么办？请用更多细节编辑您的问题。
它是饼图，没有通过 CSS 设置其宽度值的解决方案。如果我像以前的解决方案一样删除宽度和参数，它采用默认 200px 宽度和 200px 高度，我不知道。我移除参数并通过 CSS 设置宽度和高度，然后显示 svg 宽度 200px 和高度 px。
在页面样式中，它显示为 ,@media (max-width: 1280px) #icd9-pie svg { width: 180px !important;高度：160 像素！重要；但仅采用 svg 宽度 200，当我从样式更改此宽度时，它也会影响 svg 高度：160px ！重要；
但是您仍然必须将其应用于 div 而不是 SVG。我想。应该是同一个答案。
我也试过了。虽然将css应用于div，但它只占用svg的高度和宽度200px。

标签： javascript css width media-queries dc.js

【解决方案1】：

我认为您可能只是遇到了最小尺寸参数，minWidth 和 minHeight - 默认情况下它们是 200。

Docs for minWidth and minHeight

媒体查询没有像你上面指定的那样工作，我不得不添加大括号。这对我完全有用：

@media (max-width: 1280px) {
  #test { width: 180px !important; height: 160px !important; }
}

并设置minWidth 和minHeight 以允许它们低于200：

chart.minWidth(100)
   .minHeight(100)

【讨论】：

我在我的代码中为媒体查询提供了大括号。媒体查询正在工作，但是是的，你是对的，它只采用最小高度 200。如果我试图将高度设置为低于 200，它会设置用于 div 但仅采用 svg 高度 200 像素
我检查了整个代码，dc.js，d3.js，但我没有在代码中找到任何最小高度或最大高度的设置
我的意思是 dc.js API 中的最小和最大高度，请参阅上面链接的文档。它们默认为 200，因此如果您想要更小，则需要设置它们。我将在上面添加示例代码。
但是对于散点图和饼图，我不知道为什么同样不起作用。代码在语法上有所不同。我在上面添加了代码
我在 minheight 上面添加了代码，在 css 中我给了 div 160px 的高度。然后它也采用了 svg 高度 100px