Question

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

这是我的（半工作）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(d.x);
...
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

从阅读有关滑块的similar questions开始，似乎一般的建议是使用画笔/缩放来实现焦点+上下文as in this block，但这样做超出了我的能力。（虽然我很乐意看到它的演示。）

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

Answer 1

你去哥们！ Plunker

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

Code Difference

相关变化：

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 (k.x >= begin && k.x <= 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 k.x >= begin && k.x <= end;
      }));
    });
}

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

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

我希望你注意的一件事是，使用＆＃34; style＆＃34;而不是＆＃34; attr＆＃34; （属性）用于诸如＆＃34; fill＆＃34;，＆＃34; stroke＆＃34;之类的样式。我也改变了。

希望这会有所帮助。：）

jQuery滑块不能处理d3倍数，但不会返回错误

1 个答案: