jQuery滑块不适用于d3倍数，但也不返回错误 [英] jQuery slider not working on d3 multiples, but not returning error either
问题描述
我正在尝试将jQuery范围滑块添加到包含面积图的较小倍数的页面上的主图表上，但是该滑块不会滑动，并且图表不会过渡.我正在使用此块中的代码作为实现此类滑块的指南.
以下是我(半工作)柱塞的链接: https://plnkr.co /edit/zwCBQ1wR3iBlGYCMYqFe?p =预览
我认为这应该很简单，因为我已经使用以下代码设置了根据数据动态配置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);
}
});
});
再一次，它是指向(半工作)柱塞的链接: https://plnkr.co/edit/zwCBQ1wR3iBlGYCMYqFe?p=preview
从阅读有关滑块的类似问题看来，一般建议是使用brush/缩放以实现焦点+上下文，如本例所示，但这样做超出了我的能力在这一点上的能力. (尽管我很想看到它的演示.)
我想做的是通过图形化方式(例如，通过滑块或画笔)来调整主图表的x轴/日期范围及其较小的倍数，以使其缩放或当滑块移动时重绘.就目前而言，滑块不会滑动，图表不会缩放或重绘，并且浏览器不会返回任何错误消息.您可以演示解决方案吗?
在这里，您可以成为好友！ 柱塞
对代码进行了很多更改.这是我们代码的差异检查:
相关更改:
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滑块.我错过了评论我将很快做并更新链接的代码.请仔细检查代码，如果发现任何错误或无法理解的任何问题，请通知我.
很抱歉造成延迟，因为我一次丢失了所有代码(没有保存它)，所以今天不得不重写它.
我想让您注意的一件事是，对于填充"，描边"等样式，最好使用样式"而不是属性"(属性).我也更改了这些样式. /p>
希望这会有所帮助. :)
I'm trying to add a jQuery range slider to the main chart on a page that contains small multiples of area charts, but the slider does not slide, and the charts do not transition. I'm using the code from this block as a guide for how to implement such a slider.
Here's a link to my (semi-working) Plunker: https://plnkr.co/edit/zwCBQ1wR3iBlGYCMYqFe?p=preview
I thought this should be simple, since I've already set up the means for dynamically configuring the x-axis, depending on the data, with the following code:
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;
}
}
The code that seems to be problematic with the jQuery slider I've added is this:
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);
}
});
});
Here, again, is a link to a (semi-working) Plunker: https://plnkr.co/edit/zwCBQ1wR3iBlGYCMYqFe?p=preview
From reading similar questions about sliders, it seems the general recommendation is to use brush/zoom to implement focus + context, as in this block, but doing so is beyond my abilities at this point. (Though I'd love to see it demonstrated.)
What I'm trying to do is implement some means of graphically (e.g. by means of a slider or brush) adjusting the x-axis/date range of the main chart, and its small multiples, such that they are zoomed or redrawn when the slider is moved. As it stands, the slider doesn't slide, the charts do not zoom or redraw, and the browser returns no error messages. Can you demonstrate a solution?
Here you go buddy! Plunker
Made a lot of changes to the code. Here is a diff-check of our codes:
Relevant changes:
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;
}));
});
}
Take a look at the jQuery slider too. I've missed commenting the code which I'll do soon and update the link. Please go through the code and let me know if find any bugs or anything that isn't understandable.
And I'm sorry for the delay as I lost all the code once (didn't save it), had to rewrite it today.
One thing I would like you to make note of is it's better to use "style" instead of "attr" (attribute) for stylings such as "fill", "stroke" etc. I've changed those too.
Hope this helps. :)
这篇关于jQuery滑块不适用于d3倍数，但也不返回错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
