Question

我正在导入一个我想根据三个滑块的值进行过滤的tsv文件。

目前，我可以导入数据和过滤器，但我不确定在更新滑块时如何修改过滤器。

我希望每当滑块移动时重新生成过滤器，以便只返回符合过滤器的特定数据行。

以下是响应滑块移动的部分：

d3.select("#Estimators").on("input", function() {
  update_ests(+this.value);});

// update the elements
function update_ests(Estimators) {
  // adjust the text on the range slider
  d3.select("#Estimators-value").text(Estimators);
  d3.select("#Estimators").property("value", Estimators);
 }

以下是导入数据的部分：

d3.tsv("{{url_for('static',filename='Countour_Data.txt')}}",function(data) {

var Contour_Data = data.map(function(d,i) {
    return {
        Max_Depth: +d.Max_Depth,
        Learn_Rate: +d.Learn_Rate,
        Estimators: +d.Estimators,
        Contour: JSON.parse(d.Contour)
    }})
.filter(function(d) { return d.Max_Depth == 3 &&  d.Learn_Rate == 0.05 && d.Estimators == 100})
.map(function(d){return d.Contour;})

var ScaleX = d3.scale.linear().range([0,500]).domain(d3.extent(Contour_Data[0], function(d){return d.x; }))
var ScaleY = d3.scale.linear().range([0,300]).domain(d3.extent(Contour_Data[0], function(d){return d.y; }))
var ScaleColor = d3.scale.linear()
            .domain([0,1])
            .range(["white","blue"]);


d3.select("#Contour")
    .selectAll("circle")
    .data(Contour_Data[0])
    .enter()
    .append("rect")
    .attr("class","pixels")
    .attr("x",function(d){return ScaleX(d.x)})
    .attr("y",function(d){return ScaleY(d.y)})
    .attr("width",15)
    .attr("height",15)
    .attr("fill",function(d){return ScaleColor(d.pred)})
})

D3过滤数据基于滑块值

0 个答案: