如何在d3.js中重新標定顯示的數據？

我正在研究能夠過濾我的數據的散點圖圖表。我的問題是，當我過濾並刪除一些數據時，顯示的數據不再填充容器。我需要將域更新到新的範圍（不包括已刪除的數據點）。這裏是我的代碼：如何在d3.js中重新標定顯示的數據？

var parseTime = d3.timeParse("%Y-%m-%d"); 

var x = d3.scaleTime().range([0, width]); 
var y = d3.scaleLinear().range([height, 0]); 

var svg = d3.select("body").append("svg") 
    .attr("width", width + margin.left + margin.right) 
    .attr("height", height + margin.top + margin.bottom) 
    .append("g") 
    .attr("transform", 
      "translate(" + margin.left + "," + margin.top + ")"); 

    function draw(data, instrument) { 

    var data = data[instrument]; 

    data.forEach(function(d) { 
     d.date = parseTime(d.date); 
     d.close = +d.close; 
     d.year = +d.dyear; 
     d.month = +d.month; 
     d.day = +d.day; 
    }); 

    x.domain(d3.extent(data, function(d) { return d.date; })); 
    y.domain([0, 1.2*d3.max(data, function(d) { return d.close; })]); 

    svg.selectAll("dot") 
    .data(data) 
    .enter() 
    .append("circle") 
    .style("fill", "red") 
    .attr("r", 3.5) 
    .attr("cx", function(d) { return x(d.date); }) 
    .attr("cy", function(d) { return y(d.close); }) 
    .filter(function(d) { return d.day > 12; }) 
    .remove(); 

    svg.append("g") 
     .attr("class", "axis") 
     .attr("transform", "translate(0," + height + ")") 
     .call(d3.axisBottom(x) 
     .ticks(10)); 

    svg.append("g") 
     .attr("class", "axis") 
     .call(d3.axisLeft(y) 
      .ticks(8)); 
    } 

var dataset = d3.json("test.json", function(error, data) { 
    if (error) throw error; 

    draw(data, "test_instrument"); 

});

來源

2017-07-30 anyone

你需要保留刪除的數據在原始數組中？或者你可以在加載/繪圖之前刪除任何大於12日的東西 –

好吧，稍後我想製作一些按鈕來顯示過去一週或一月或一年的數據。所以刪除的數據需要保留在原始數組中。 – anyone

你應該過濾數據，然後重置基於經過濾的數據集scale'domain。您可能不需要刪除不符合標準的圓，而是設置「知名度」或「不透明」，而不是（這取決於你要多少隱藏）

let threshold = 12; 

let filteredData = data.filter(function(d){ return d.day > threshold ; }) 
... 
x.domain(d3.extent(filteredData , function(d) { return d.date; })); 
... 
svg.selectAll("dot") 
    .data(data) 
    .enter() 
    .append("circle") 
    ... 
    .style("visibility", function(d) { return d.day > threshold ? "visible": "hidden"; })

來源

2017-07-31 21:56:25

非常感謝。這對我行得通。 – anyone

如何在d3.js中重新標定顯示的數據？

回答

相關問題