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

我正在为库创建一个有角度的包装。我一直在密切关注这个问题，以使一些示例能够工作，并且我在饼图和行图方面取得了一些成功。我能够让折线图工作，我可以用画笔选择区域。但是，我不能缩放。我已禁用画笔并启用鼠标缩放

当我将图表悬停并移动滚轮时，页面上的其他图表会做出反应，因此过滤器会生效。当我选择饼图的一部分时，它会过滤图表：

在文档中，我注意到有一个

缩放的事件。我看不到在带注释的源代码中使用
.on（'zoomed'，…）
，但是结果非常清楚（干净地）支持缩放。我不确定是否需要实现一个侦听器来在缩放时重新定义域可缩放图表的域。如果是这样的话，我不确定如何为新域获得最低和最高的值

编辑：
戈登·伍德赫尔（Gordon Woodhull）（在评论中）表示，缩放功能源自
d3缩放
，因此无需监听
缩放
事件并重新计算域

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



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

让applicatablemixins={
baseMixin:true，//基本mixin适用于所有dc.js图表
colorMixin:true，//colorMixin适用于所有dc.js图表
coordinateGridMixin:[“条”、“线”、“气泡”]。indexOf（cS.type）>=0，
marginMixin:[“行”、“条”、“行”、“气泡”]。索引of（cS.type）>=0，
//待办事项：泡泡酱
//TODO:capMixin
//待办事项：斯塔克米辛
}
设c=此图；
//注意：所有图表设置都是在chart-settings.model中指定的默认值，因此没有
//需要在此处设置默认值。将定义ChartSettings对象中的所有特性。
//碱性混合物
c、 高度（cS.height）；//空时填充父项
c、 宽度（cS.width）；
c、 维度（此最新接受维度）；
c、 组（本最新接受组）；
//混色
c、 颜色（d3.scaleOrdinal（d3.SchemeCategory 10））；
//坐标网格混合
if（应用混合素协调混合素）{
c、 布鲁森（假）；
c、 elasticX（cS.elasticX）；
c、 x（cS.xScale）；//d3.scaleTime（）.domain（[新日期（1985,1,1），新日期（1986,4,1）]）
c、 round（d3.timeMonth.round）；//来自示例
c、 xUnits（d3.timeMonths）；//来自示例
c、 renderArea（cS.renderArea）；//true
c、 mouseZoomable（真）；
//例如，覆盖。
c、 宽度（990）；
c、 身高（200）；
c、 弹性（cS.elasticY）；//正确
c、 渲染水平网格线（真）；
c、 RenderServerTicalGridLines（假）；
c、 zoomScale（[01100]）；
c、 动物园严格（假）；
c、 边距({
顶部：30，右侧：50，底部：25，左侧：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",
        ...
    }
]


经过一番反复，我们发现问题仅仅在于
elasticX
与
mouseZoomable
不兼容，因为它会将x尺度域永久锁定在数据中的整个值范围内

为了允许
mouseZoomable（true）
您需要确保
elasticX
为false

当然，这也意味着您需要自己计算X尺度域，这有点烦人。如果两个选项都设置了，那么dc.js可能只应该“elast”X域一次（在渲染时）。这很方便，而且可能是预期的结果。
之前的工作：Tom Neyland制作了一个名为Angular 1 IIRC的角包装器。尽管如此，您还是可以从中学习到一些东西。焦点/范围图功能内置，看起来它不使用缩放事件，因为它直接与d3缩放事件关联。我不完全清楚你的问题-有没有任何代码可以共享？如果不看一些代码，很难说；正如您所说，内置的演示可以工作。有什么可以分享的吗？我明白了。代码没有我希望的那么有用。我想我需要看到它运行以帮助调试它。当然，如果我只是将
mouseZoomable（true）
添加到缩放中。这是个好主意，但它奏效了。我很难猜测，如果没有缩放绘图，会发生什么样的缩放过滤。如果我在redraw上设置一个断点，它会显示onZoom->\u chart.focus->zoomHandler->\u chart.redraw，所以我想你可以看到失败的地方。不看运行的代码很难猜，但我很确定
.focus（）
已经定义：）我也尝试过放大，但不是这样，可能是角度绑定中的某个东西？