jQuery滑块不工作在d3倍数，但也没有返回错误

我正在尝试将jQuery范围滑块添加到包含小倍数面积图的页面上的主图表中，但滑块不会滑动，并且图表不会转换。 我正在使用此块中的代码作为如何实现此类滑块的指南。

这是我的（半工作）Plunker的链接： https ：//plnkr.co/edit/zwCBQ1wR3iBlGYCMYqFe ？ p = preview

我认为这应该很简单，因为我已经设置了动态配置x轴的方法，具体取决于数据，具有以下代码：

var startDate = d3.time.month.offset(new Date(), -108); var endDate = new Date (); var dates = createDatesArr(startDate, endDate); ... var area = d3.svg.area() .x(function(d) { return xScale(dx); ... xScale.domain([ d3.min(dates, function(d) { return d; }), d3.max(dates, function(d) { return d; }) ]); var totals = []; for (i = 0; i < dates.length; i++) { totals[i] = 0; for (j = 0; j < dataset.length; j++) { totals[i] += dataset[j].values[i].y; } } 

我添加的jQuery滑块似乎有问题的代码是这样的：

  function zoom(begin, end) { xScale.domain([begin, end - 1]); yScale.domain([begin, end - 1]); var t = state.transition().duration(0); var size = end - begin; var step = size / 10; t.select('.path').attr("d", function(d) { return area(d.values); }); } ... $(function() { $( "#slider-range" ).slider({ range: true, min: 0, max: dataset.length-1, values: [ 0, dataset.length-1 ], slide: function( event, ui ) { var begin = d3.min([ui.values[0], dataset.length]); var end = d3.max([ui.values[1], 0]); console.log("begin:", begin, "end:", end); zoom(begin, end); } }); }); 

在这里，再次是一个链接到（半工作）Plunker： https ：//plnkr.co/edit/zwCBQ1wR3iBlGYCMYqFe ？ p = preview

通过阅读有关滑块的类似问题 ，似乎一般的建议是使用画笔/缩放来实现焦点+上下文， 就像在这个块中一样 ，但这样做超出了我的能力。 （虽然我很乐意看到它。）

我要做的是实现一些图形化的方法（例如通过滑块或画笔）调整主图表的x轴/日期范围及其小的倍数，以便它们在缩放或重绘时滑块移动。 就目前而言，滑块不会滑动，图表不会缩放或重绘，浏览器不会返回任何错误消息。 你能certificate一个解决方案吗？

Answer 1

伙伴们！ Plunker

对代码进行了很多更改。 这是我们的代码的差异检查：

代码差异

相关变化：

 function rerenderAreaChart(selectedState, dataset, svgHook, size, begin, end) { var totalTicksX = Math.round(size.w / 60), totalTicksY = Math.round(size.h / 40); xAxis.ticks(totalTicksX); yAxis.ticks(totalTicksY); yScale.range([padding.top, size.h - padding.bottom]); xScale.domain([begin, end]); var filtered_indices = []; dataset[0].values.forEach(function(k, i) { if (kx >= begin && kx <= end) { filtered_indices.push(i); } }); var max = d3.max(filtered_indices, function(idx) { return d3.sum(dataset, function(d) { return d.values[idx].y; }) }); yScale.domain([max, 0]); d3.select(svgHook).select('svg.state.' + selectedState).select('.x.axis') .transition().duration(50).call(xAxis).selectAll(".tick text") .call(wrap, 0); d3.select(svgHook).select('svg.state.' + selectedState).select('.y.axis') .transition().duration(50).call(yAxis); dataset.forEach(function(d) { d.values.forEach(function(v, idx) { v.hidden = filtered_indices.indexOf(idx) === -1; }) }); stack(dataset); d3.select(svgHook).select('svg.state.' + selectedState).select('g.paths').selectAll("path") .attr("clip-path", "url(#clip)") .attr('d', function(d) { return area(d.values.filter(function(k) { return kx >= begin && kx <= end; })); }); } 

看看jQuery滑块也是如此。 我错过了对我即将完成的代码的评论并更新链接。 如果发现任何不可理解的错误或任何错误，请仔细阅读代码并告诉我。

我很遗憾因为我丢失了所有代码一次（没有保存），今天不得不重写它。

我希望你注意的一件事是，最好使用“style”而不是“attr”（属性）来设置诸如“fill”，“stroke”等样式。我也改变了这些。

希望这可以帮助。 🙂