Question

我正在为dc.js库创建Angular包装器。我一直密切关注annotated source，以使一些示例正常工作，并且在饼图和行图方面也取得了一些成功。我能够使折线图正常工作，并且可以使用笔刷选择区域。但是，我无法缩放。我已禁用画笔并启用了鼠标缩放。

当我将鼠标悬停在图表上并移动滚轮时，页面上的其他图表会做出反应，因此过滤器正在生效。当我选择一片馅饼时，它确实会过滤图表：

在文档中，我注意到有一个zoomed事件。我没有在带注释的源中看到.on('zoomed', ...)的任何用法，但是生成的line chart非常清楚（清晰地）支持缩放。我不确定是否需要实现侦听器以重新定义域可缩放图表的缩放域。如果是这样，我不确定如何获得该新域的最低和最高价值。

编辑：戈登·伍德赫尔（Gordon Woodhull）在评论中表示，缩放功能是从d3-zoom派生的，因此无需监听zoomed事件并重新计算域。

还可以查看在包装器中如何创建图表。图表组件包含一个<div>，它赋予dc.js以放置图表。图表组件将ChartSettings模型作为输入，在呈现图表之前对其进行配置。显示图表的组件将执行以下操作：

<dc-chart [settings]="priceChart"></dc-chart>

Chart组件本身使用设置（指定类型）来确定要实例化的正确dc.js图表对象。然后，组件使用实现交叉过滤器的服务来检索所需域和范围（在给定设置中指定）的维度和组。使用设置和服务的响应，组件可以配置图表：

let applicableMixins = {
  baseMixin: true, // The base mixin applies to all dc.js charts
  colorMixin: true, // The color mixin applies to all dc.js charts
  coordinateGridMixin: ["bar", "line", "bubble"].indexOf(cS.type) >= 0,
  marginMixin: ["row", "bar", "line", "bubble"].indexOf(cS.type) >= 0,
  // TODO: bubbleMixin
  // TODO: capMixin
  // TODO: stackMixin
}

let c = this.chart;
// Note: All chart settings are assigned default values in chart-settings.model, so there's no
// need to set default values here. All properties in a ChartSettings object are defined.
// Base Mixin
c.height( cS.height ); // fills parent when null
c.width( cS.width );
c.dimension(this.latestReceipt.dimension);
c.group(this.latestReceipt.group);

// Color Mixin
c.colors(d3.scaleOrdinal(d3.schemeCategory10));

// Coordinate Grid Mixin
if(applicableMixins.coordinateGridMixin) {
  c.brushOn(false);
  c.elasticX(cS.elasticX);
  c.x(cS.xScale); // d3.scaleTime().domain([new Date(1985, 1, 1), new Date(1986, 4, 1)])
  c.round(d3.timeMonth.round); // from example
  c.xUnits(d3.timeMonths); // from example
  c.renderArea(cS.renderArea); // true
  c.mouseZoomable(true);

  // Override for example.
  c.width(990);
  c.height(200);

  c.elasticY(cS.elasticY); // true
  c.renderHorizontalGridLines(true);
  c.renderVerticalGridLines(false);
  c.zoomScale([0, 100]);
  c.zoomOutRestrict(false);
  c.margins({
    top: 30, right: 50, bottom: 25, left: 40
  });
}

为了使缩放正常工作，我尽可能地模仿了带注释的源。我使用的是生成的数据，它模拟的股票价值比dc.js主页示例中使用的数据更为冗长。

[
    {
        "open": 110.47,
        "high": 115.16,
        "low": 104.79,
        "close": 117.0982,
        "date": "01/01/1985",
        "quarter": 1,
        "isGain": true,
        "dayOfWeek": "Tue"
    },
    {
        "open": "117.10",
        "high": 120.58,
        "low": 117.03,
        "close": 124.126,
        "date": "01/02/1985",
        "quarter": 1,
        "isGain": true,
        "dayOfWeek": "Wed"
    },
    {
        "open": "124.13",
        "high": 128.31,
        "low": 116.28,
        "close": 119.16479999999999,
        "date": "01/03/1985",
        "quarter": 1,
        "isGain": false,
        "dayOfWeek": "Thu"
    },
    ...
    {
        "date": "04/01/1986",
        ...
    }
]

Answer 1

经过反复研究，我们发现问题很简单，elasticX与mouseZoomable不兼容，因为它将x标度域永久锁定到数据中所有值的范围

为了允许mouseZoomable(true)，您需要确保elasticX为假。

当然，这还意味着您需要自己计算X尺度域，这有点令人讨厌。如果同时设置了这两个选项，则dc.js只能（至少在渲染时）“至少” X域一次。这样会很方便，而且可能是预期的结果。

鼠标缩放不适用于dc.js折线图

1 个答案: